動態載入js、css等檔案跨iframe實現

動態載入js、css等檔案跨iframe實現

 這篇文章主要介紹了動態載入js、css等檔案跨iframe實現的方法,需要的朋友可以參考下

1、動態載入js，css檔案(用原生js和jquery) 

 

iframe結構： 

frame0(父) 

frame2（子） 

frame3（子） 

 

frame2中觸發事件，動態向frame3中 載入js、css檔案和 dom元素？ 

 

*同級之間可以調用，可以 通過 子-父-子 的方式調用同級 

parent.parentFram(“這個方法在調用其他子farme”); 

 

1.jquery的append() 

 代碼如下:

速度快，同步（需要引入jquery） 

 

var oBody = document.getElementById("frame3_id").contentWindow.$("body"); 

 

var str = "<div>...</div>" 

var scriptTag = document.getElementById("frame3_id").contentWindow.document.getElementById("pop"); 

if(!scriptTag){ 

oBody.append(str); 

} 

 

var oScript= document.createElement("script"); 

oScript.id = "oScript1"; 

oScript.type = "text/javascript"; 

oScript.src="/test.js"; 

var oTag1 = document.getElementById("frame3_id").contentWindow.document.getElementById("oScript1"); 

if(!oTag1){ 

oBody.append(oScript); 

} 

 

document.getElementById("frame3_id").contentWindow.test(); // 調用frame3_id 中的test()方法 

 

*********************************** 

上述例子：a.需要引入jquery； 

*********************************** 

2.js 的appendChild() 

 

速度慢，非同步（需要判斷js是否載入完畢） 

 

列子2： 

 代碼如下:

var str = "<div>...</div>" 

var popDiv=document.createElement('div'); 

popDiv.style.xx = xxx; 

popDiv.id = "pop"; 

popDiv.innerHTML = str; 

var oBody = document.getElementById("frame3_id").contentWindow.document.getElementsByTagName("body")[0]; 

var oHead = document.getElementById("frame3_id").contentWindow.document.getElementsByTagName("head"); 

 

if(oHead && oHead.length){ 

oHead = oHead[0]; 

}else{ 

oHead = oBody; 

} 

 

var elemDivTag = document.getElementById("frame3_id").contentWindow.document.getElementById("pop"); 

if(!elemDivTag){ 

oBody.appendChild(popDiv) 

} 

 

var oScript= document.createElement("script"); （css類似） 

oScript.id = "oScript1"; 

oScript.type = "text/javascript"; 

oScript.src="/test.js"; 

var scriptTag = document.getElementById("main").contentWindow.document.getElementById("oScript1"); 

if(!scriptTag){ 

oHead.appendChild(oScript); 

} 

oScript.onload = oScript.onreadystatechange = function(){ 

if ((!this.readyState) || this.readyState == "complete" || this.readyState == "loaded" ){ 

document.getElementById("main").contentWindow.test(); // test()方法 在 引入的js檔案中 

}else{ 

console.info("can not load the oScript2.js file"); 

} 

}