动态加载js、css等文件跨iframe实现
1、动态加载js,css文件(用原生js和jquery)
iframe结构:
frame0(父)
frame2(子)
frame3(子)
frame2中触发事件,动态的向frame3中 加载js、css文件和 dom元素?
*同级之间可以调用,可以 通过 子-父-子 的方式调用同级
parent.parentFram(“这个方法在调用其他子farme”);
1.jquery的append()
***********************************
上述例子:a.需要引入jquery;
***********************************
2.js 的appendChild()
速度慢,异步(需要判断js是否加载完毕)
列子2:
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"); } }
相关推荐
88274956 2020-11-03
runner 2020-09-01
梦的天空 2020-08-25
移动开发与培训 2020-08-16
ReunionIsland 2020-08-16
lyqdanang 2020-08-16
MyNameIsXiaoLai 2020-07-08
星辰的笔记 2020-07-04
csstpeixun 2020-06-28
letheashura 2020-06-26
liaoxuewu 2020-06-26
sunzhihaofuture 2020-06-21
FEvivi 2020-06-16
坚持着执着 2020-06-16
waterv 2020-06-14
xiaoge00 2020-06-14
firejq 2020-06-14
firstboy0 2020-06-14
e度空间 2020-06-12
zhongweinan 2020-06-10