動(dòng)態(tài)加載js、css等文件跨iframe實(shí)現(xiàn)

更新時(shí)間：2014年02月24日 15:17:00 作者：

這篇文章主要介紹了動(dòng)態(tài)加載js、css等文件跨iframe實(shí)現(xiàn)的方法,需要的朋友可以參考下

1、動(dòng)態(tài)加載js，css文件(用原生js和jquery)

iframe結(jié)構(gòu)：
frame0(父)
frame2（子）
frame3（子）

frame2中觸發(fā)事件，動(dòng)態(tài)的向frame3中加載js、css文件和 dom元素？

*同級(jí)之間可以調(diào)用，可以通過(guò) 子-父-子的方式調(diào)用同級(jí)
parent.parentFram(“這個(gè)方法在調(diào)用其他子farme”);

1.jquery的append()

復(fù)制代碼代碼如下:

 
速度快，同步（需要引入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(); // 調(diào)用frame3_id 中的test()方法 

***********************************
上述例子：a.需要引入jquery；
***********************************
2.js 的appendChild()

速度慢，異步（需要判斷js是否加載完畢）

列子2：

復(fù)制代碼代碼如下:

 
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類(lèi)似） 
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"); 
} 
} 

您可能感興趣的文章:

相關(guān)文章

微信小程序保持session會(huì)話(huà)的方法
這篇文章主要介紹了微信小程序保持session會(huì)話(huà)的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-03-03
JavaScript圣杯布局與雙飛翼布局實(shí)現(xiàn)案例詳解
這篇文章主要介紹了JavaScript圣杯布局與雙飛翼布局實(shí)現(xiàn)案例，這是前端面試中需要掌握的知識(shí)點(diǎn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-08-08
基于Bootstrap框架實(shí)現(xiàn)圖片切換
這篇文章主要介紹了基于Bootstrap框架實(shí)現(xiàn)圖片切換的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2017-03-03
js this 綁定機(jī)制深入詳解
這篇文章主要介紹了js this 綁定機(jī)制,結(jié)合實(shí)例形式深入分析了js this 綁定機(jī)制相關(guān)原理、使用技巧與操作注意事項(xiàng),需要的朋友可以參考下
2020-04-04
require導(dǎo)入module.exports 或 exports導(dǎo)出的使用方法
module.exports用于導(dǎo)出整個(gè)模塊的內(nèi)容,可以通過(guò)賦值給 module.exports 導(dǎo)出一個(gè)對(duì)象、函數(shù)或值,導(dǎo)出的內(nèi)容可以被其他模塊通過(guò)require 導(dǎo)入,本文給大家介紹require導(dǎo)入module.exports 或 exports導(dǎo)出的使用,感興趣的朋友一起看看吧
2023-11-11
JS實(shí)現(xiàn)仿百度文庫(kù)評(píng)分功能
本文給大家分享基于js實(shí)現(xiàn)仿百度文庫(kù)評(píng)分功能，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下吧
2017-01-01
javascript獲取文檔坐標(biāo)和視口坐標(biāo)
制作網(wǎng)頁(yè)的過(guò)程中，你有時(shí)候需要知道某個(gè)元素在網(wǎng)頁(yè)上的確切位置。下面的教程總結(jié)了Javascript在網(wǎng)頁(yè)定位方面的相關(guān)知識(shí)。有需要的小伙伴可以參考下。
2015-05-05
詳解JavaScript的原型與原型鏈
這篇文章主要為大家詳細(xì)介紹了JavaScript原型與原型鏈，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
2022-03-03
javascript Deferred和遞歸次數(shù)限制實(shí)例
你知道Deferred和遞歸次數(shù)限制嗎？如果還不知道，可以看看下面的實(shí)例，很好，適合新手朋友們
2014-10-10
給moz-firefox下添加IE方法和屬性
給moz-firefox下添加IE方法和屬性...
2007-04-04