动态加载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 相关文章推荐
jquery tab标签页的制作
May 10 Javascript
JQUBAR1.1 jQuery 柱状图插件发布
Nov 28 Javascript
JavaScript常用对象的方法和属性小结
Jan 24 Javascript
jquery remove方法应用详解
Nov 22 Javascript
浅析tr的隐藏和显示问题
Mar 05 Javascript
javascript制作sql转换为stringBuffer的小工具
Apr 03 Javascript
javaScript中push函数用法实例分析
Jun 08 Javascript
学习javascript面向对象 理解javascript对象
Jan 04 Javascript
只需五句话搞定JavaScript作用域(经典)
Jul 26 Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
Feb 14 Javascript
Angular中管道操作符(|)的使用方法
Dec 15 Javascript
js经验分享 JavaScript反调试技巧
Mar 10 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中empty和isset对于参数结构的判断及empty()和isset()的区别
2015/11/15 PHP
PHP实现的oracle分页函数实例
2016/01/25 PHP
php cookie工作原理与实例详解
2016/07/18 PHP
PHP进程通信基础之信号
2017/02/19 PHP
jqPlot Option配置对象详解
2009/07/25 Javascript
多个表单中如何获得这个文件上传的网址实现js代码
2013/03/25 Javascript
jQuery中ajax的使用与缓存问题的解决方法
2013/12/19 Javascript
JS随机打乱数组的方法小结
2016/06/22 Javascript
jQuery实现的购物车物品数量加减功能代码
2016/11/16 Javascript
JavaScript hasOwnProperty() 函数实例详解
2017/08/04 Javascript
js微信分享实现代码
2020/10/11 Javascript
详解从新建vue项目到引入组件Element的方法
2017/08/29 Javascript
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
2017/09/12 jQuery
在Vue methods中调用filters里的过滤器实例
2018/08/30 Javascript
Nodejs让异步变成同步的方法
2019/03/02 NodeJs
create-react-app中添加less支持的实现
2019/11/15 Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
2020/08/05 Javascript
JS面向对象实现飞机大战
2020/08/26 Javascript
区分vue-router的hash和history模式
2020/10/03 Javascript
Python基于Tkinter实现的记事本实例
2015/06/17 Python
Python银行系统实战源码
2019/10/25 Python
在pycharm中创建django项目的示例代码
2020/05/28 Python
戴森台湾线上商城:Dyson Taiwan
2018/05/21 全球购物
值类型与引用类型有什么不同?请举例说明?并分别列举几种相应的数据类型
2015/10/24 面试题
校园网站的创业计划书范文
2013/12/30 职场文书
档案室主任岗位职责
2014/02/12 职场文书
代办委托书怎样写
2014/04/08 职场文书
我们的节日元宵活动方案
2014/08/23 职场文书
2014年幼儿园教师工作总结
2014/11/08 职场文书
工作保证书
2015/01/17 职场文书
2015年小学教科研工作总结
2015/07/20 职场文书
一年级下册数学教学反思
2016/02/16 职场文书
python中requests库+xpath+lxml简单使用
2021/04/29 Python
浅谈JS的二进制家族
2021/05/09 Javascript
修改MySQL的默认密码的四种小方法
2021/05/26 MySQL
「魔导具师妲莉亚永不妥协~从今天开始的自由职人生活~」1、2卷发售宣传CM公开
2022/03/21 日漫