html+js 复用（不使用后端、不使用框架插件，纯html+js）

我在网上看到的关于html复用的问题，大多数都是用后端（include）或者是插件（如glup）。

但是我没用过那插件，而且也不想因为这一点问题就再多加载个插件。原本我写的是php、html混写，现在不是追求前后端分类嘛，那没法子了，只好自己写。

一开始我是想着用iframe来引入页面。但是实际上用了，发现，它还得重新设置iframe标签，这样就很麻烦了。还得根据不同的内容进行修改。

接着我就想着把内容拿出来再重新挂载入dom树（这里我蠢了一次，想着用script标签实现，但是script标签没法获取内容，后来想起来iframe可以），于是用iframe标签和importNode()函数结合实现复用的方法就出来了。

再说说缺点，其他的不说，但是在加载的时候比其他部分慢出现是真滴不爽。

如果有更好的方法请@我

html代码如下：

<!-- 模块父元素 记得给id -->
	<div id="demo"></div>
<!-- js脚本 -->
    <!-- 引入js文件（就是下面介绍的js代码） -->
    <script src="path/reuse.js"></script>
	<script>
 		reuse(
 			"demo",
 			"/myweb_new/admin/inc/siderbar/siderbar.html",
 			"/myweb_new/admin/inc/siderbar/js/siderbar.js"
 		);
	</script>

js具体代码如下(你可以把它单独放一个文件做插件使用)：

// 功能：实现html模块的复用
//id 父元素id（注意，这个父元素你最好新建一个，它会被替换）
//pageURL 复用模块的地址，
//jsURL js的地址
function reuse(id,pageURL,jsURL){
	//创建iframe并在其加载完成后获取其body标签内容（我们的目标内容）
	var iframe=createLinkTag("iframe",{'src':pageURL});
	iframe.style.display="none";//隐藏
//这里提一下，如果你的模块不是标准html文件也没事，iframe模块在被处理的时候会自动补上，所以始终可以拿到body
	var body=document.getElementsByTagName('body')[0];
	body.appendChild(iframe);//加载入原文档
	var content;//内容
	var eleNew;//要插入的模块
	//判断是否加载完成
	loaded(iframe,function(){
		//获取模块html内容
		var content=iframe.contentWindow.document.getElementsByTagName("body")[0];
		var eleNew=document.importNode(content,true);
		var target=document.getElementById(id);
		target.parentNode.replaceChild(eleNew,target);
		//再把js文件导入
		if(jsURL){
			var script=createLinkTag("script",{'src':jsURL});
			body.appendChild(script);//加载入原文档
		}
	});
	//判断元素是否加载完成（这里做了兼容ie的处理）
	function loaded(jsNode,callback){
		if (jsNode.attachEvent){
			jsNode.attachEvent("onload", function(){
				callback();
			});
		} else {
			jsNode.onload = function(){
				callback();
			};
		}
	}
	//创建标签
	function createLinkTag(tagName,obj){
		var ele=document.createElement(tagName);
		for(item in obj){
			ele.setAttribute(item,obj[item]);//添加属性
		}
		return ele;
	}
};