动态加载js、css等文件跨iframe实现


Posted in Javascript onFebruary 24, 2014

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"); 
} 
}
Javascript 相关文章推荐
IE、FF浏览器下修改标签透明度
Jan 28 Javascript
JS根据年月获得当月天数的实现代码
Jul 03 Javascript
JavaScript实现关键字高亮功能
Nov 12 Javascript
jQuery统计上传文件大小的方法
Jan 24 Javascript
jquery+html5制作超酷的圆盘时钟表
Apr 14 Javascript
JavaScript中setUTCFullYear()方法的使用简介
Jun 12 Javascript
JS中使用FormData上传文件、图片的方法
Aug 07 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
Oct 28 Javascript
D3.js中强制异步文件读取同步的几种方法
Feb 06 Javascript
vue做网页开场视频的实例代码
Oct 20 Javascript
ES6学习笔记之map、set与数组、对象的对比
Mar 01 Javascript
javascript 数组(list)添加/删除的实现
Dec 17 Javascript
js操纵dom生成下拉列表框的方法
Feb 24 #Javascript
js设置function参数默认值(适合没有传参情况)
Feb 24 #Javascript
JS取request值以及自动执行使用示例
Feb 24 #Javascript
减少访问DOM的次数提升javascript性能
Feb 24 #Javascript
createTextRange()的使用示例含文本框选中部分文字内容
Feb 24 #Javascript
JavaScript 实现鼠标拖动元素实例代码
Feb 24 #Javascript
对table和ul实现js分页示例分享
Feb 24 #Javascript
You might like
PHP中调用C/C++制作的动态链接库的教程
2016/03/10 PHP
Javascript之文件操作
2007/03/07 Javascript
XHTML下,JS浮动代码失效的问题
2009/11/12 Javascript
分享10篇优秀的jQuery幻灯片制作教程及应用案例
2011/04/16 Javascript
Jquery判断$(&quot;#id&quot;)获取的对象是否存在的方法
2013/09/25 Javascript
JavaScript函数定义的常见注意事项小结
2014/09/16 Javascript
js实现缓冲运动效果的方法
2015/04/10 Javascript
BootStrap Validator使用注意事项(必看篇)
2016/09/28 Javascript
利用jquery禁止外层滚动条的滚动
2017/01/05 Javascript
详解webpack异步加载业务模块
2017/06/23 Javascript
详解利用Angular实现多团队模块化SPA开发框架
2017/11/27 Javascript
vue中子组件的methods中获取到props中的值方法
2018/08/27 Javascript
Vue2.0学习系列之项目上线的方法步骤(图文)
2018/09/25 Javascript
微信小程序实现蒙版弹窗效果
2018/11/01 Javascript
Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结
2019/02/11 Javascript
Vue.extend实现挂载到实例上的方法
2019/05/01 Javascript
Vue中的循环及修改差值表达式的方法
2019/08/29 Javascript
在Echarts图中给坐标轴加一个标识线markLine
2020/07/20 Javascript
[03:42]2014DOTA2西雅图国际邀请赛 Navi战队巡礼
2014/07/07 DOTA
python通过pil模块将raw图片转换成png图片的方法
2015/03/16 Python
Python利用递归和walk()遍历目录文件的方法示例
2017/07/14 Python
python中append实例用法总结
2019/07/30 Python
Python logging模块进行封装实现原理解析
2020/08/07 Python
使用css3匹配手机屏幕横竖状态
2014/01/27 HTML / CSS
中国综合网上购物商城:苏宁易购
2016/08/09 全球购物
模具专业推荐信
2013/10/30 职场文书
企业管理毕业生求职信范文
2014/03/07 职场文书
新年爱情寄语
2014/04/08 职场文书
村委会换届选举方案
2014/05/03 职场文书
活动总结模板
2014/05/09 职场文书
2014年祖国生日寄语
2014/09/19 职场文书
自查自纠工作情况报告
2014/10/29 职场文书
优秀教师个人总结
2015/02/11 职场文书
家长意见和建议怎么写
2015/06/04 职场文书
小学四年级班主任工作经验交流材料
2015/11/02 职场文书
python中if和elif的区别介绍
2021/11/07 Python