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;
	}
};