动态加载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 相关文章推荐
JavaScript使用技巧精萃[代码非常实用]
Nov 21 Javascript
jquery随机展示头像代码
Dec 21 Javascript
JavaScript 用Node.js写Shell脚本[译]
Sep 20 Javascript
js 获取元素下面所有li的两种方法
Apr 14 Javascript
javascript无刷新评论实现方法
May 13 Javascript
jquery拖拽效果完整实例(附demo源码下载)
Jan 14 Javascript
在Node.js中使用Javascript Generators详解
May 05 Javascript
vue 组件中添加样式不生效的解决方法
Jul 06 Javascript
webstorm中配置Eslint的两种方式及差异比较详解
Oct 19 Javascript
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
Nov 07 jQuery
js实现轮播图效果 纯js实现图片自动切换
Aug 09 Javascript
js观察者模式的弹幕案例
Nov 23 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边学边教》(01.开篇――准备工作)
2006/12/13 PHP
PHP集成FCK的函数代码
2008/09/27 PHP
Windows下利用Gvim写PHP产生中文乱码问题解决方法
2011/04/20 PHP
PHP实现的操作数组类库定义与用法示例
2019/05/24 PHP
offsetParent 算法分析
2010/04/05 Javascript
JavaScript获取和设置CheckBox状态的简单方法
2013/07/05 Javascript
jquery ajax请求方式与提示用户正在处理请稍等
2014/09/01 Javascript
jQuery的one()方法用法实例
2015/01/19 Javascript
JavaScript的Backbone.js框架的一些使用建议整理
2016/02/14 Javascript
标准的js无缝滚动效果
2016/08/30 Javascript
前端框架Vue.js中Directive知识详解
2016/09/12 Javascript
ES6中class类用法实例浅析
2017/04/06 Javascript
详解vue 组件之间使用eventbus传值
2017/10/25 Javascript
AngularJS中scope的绑定策略实例分析
2017/10/30 Javascript
ES6知识点整理之数组解构和字符串解构的应用示例
2019/04/17 Javascript
ES6 Iterator遍历器原理,应用场景及相关常用知识拓展详解
2020/02/15 Javascript
在DigitalOcean的服务器上部署flaskblog应用
2015/12/19 Python
浅谈python新手中常见的疑惑及解答
2016/06/14 Python
浅谈Django学习migrate和makemigrations的差别
2018/01/18 Python
Python实现通过继承覆盖方法示例
2018/07/02 Python
python3爬虫怎样构建请求header
2018/12/23 Python
win10环境下配置vscode python开发环境的教程详解
2019/10/16 Python
python ETL工具 pyetl
2020/06/07 Python
python实现人工蜂群算法
2020/09/18 Python
CSS3实战第一波 让我们尽情的圆角吧
2010/08/27 HTML / CSS
法国时尚童装网站:Melijoe
2016/08/10 全球购物
Boden美国官网:英伦原创时装品牌
2017/07/03 全球购物
澳大利亚当地社区首选的光学商店:1001 Optical
2019/08/24 全球购物
DJI全球:DJI Global
2021/03/15 全球购物
新学期决心书
2014/03/11 职场文书
单位绩效考核方案
2014/05/11 职场文书
补充协议书
2015/01/28 职场文书
关于应聘教师的自荐信
2016/01/28 职场文书
残联2016年全国助残日活动总结
2016/04/01 职场文书
pytorch 如何使用amp进行混合精度训练
2021/05/24 Python
一文搞清楚MySQL count(*)、count(1)、count(col)区别
2022/03/03 MySQL