动态加载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字符串处理性能的代码
Dec 07 Javascript
JQuery页面图片切换和新闻列表滚动效果的具体实现
Sep 26 Javascript
js全屏显示显示代码的三种方法
Nov 11 Javascript
原生javascript实现无间缝滚动示例
Jan 28 Javascript
AngularJS优雅的自定义指令
Jul 01 Javascript
js实现表格筛选功能
Jan 18 Javascript
webpack本地开发环境无法用IP访问的解决方法
Mar 20 Javascript
vue 实现边输入边搜索功能的实例讲解
Sep 16 Javascript
zepto.js 实时监听输入框的方法
Dec 04 Javascript
Angular 多级路由实现登录页面跳转(小白教程)
Nov 19 Javascript
详解JavaScript执行模型
Nov 16 Javascript
vue实现移动端div拖动效果
Mar 03 Vue.js
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
多人战的战术与战略
2020/03/04 星际争霸
Smarty Foreach 使用说明
2010/03/23 PHP
深入file_get_contents函数抓取内容失败的原因分析
2013/06/25 PHP
PHP+MYSQL实现用户的增删改查
2015/03/24 PHP
PHP实现无限分类的实现方法
2016/11/14 PHP
laravel清除视图缓存的代码
2019/10/23 PHP
Jquery ajaxsubmit上传图片实现代码
2010/11/04 Javascript
JavaScript 事件对象介绍
2015/04/13 Javascript
JavaScript中pop()方法的使用教程
2015/06/09 Javascript
利用HTML5的画布Canvas实现刮刮卡效果
2015/09/06 Javascript
JavaScript函数内部属性和函数方法实例详解
2016/03/17 Javascript
JS中跳出循环的示例代码
2017/09/14 Javascript
js中json对象和字符串的理解及相互转化操作实现方法
2017/09/22 Javascript
用React实现一个完整的TodoList的示例代码
2017/10/30 Javascript
vue中各种通信传值方式总结
2019/02/14 Javascript
小试小程序云开发(小结)
2019/06/06 Javascript
微信小程序表单验证插件WxValidate的二次封装功能(终极版)
2019/09/03 Javascript
微信小程序实现图片压缩
2019/12/03 Javascript
使用TS来编写express服务器的方法步骤
2020/10/29 Javascript
python 函数传参之传值还是传引用的分析
2017/09/07 Python
python的变量与赋值详细分析
2017/11/08 Python
Python简单实现阿拉伯数字和罗马数字的互相转换功能示例
2018/04/17 Python
Python使用cx_Oracle模块操作Oracle数据库详解
2018/05/07 Python
解决seaborn在pycharm中绘图不出图的问题
2018/05/24 Python
pymysql之cur.fetchall() 和cur.fetchone()用法详解
2020/05/15 Python
Python连接HDFS实现文件上传下载及Pandas转换文本文件到CSV操作
2020/06/06 Python
selenium判断元素是否存在的两种方法小结
2020/12/07 Python
Python 中的函数装饰器和闭包详解
2021/02/06 Python
用css3实现转换过渡和动画效果
2020/03/13 HTML / CSS
html5指南-2.如何操作document metadata
2013/01/07 HTML / CSS
Hotter Shoes英国官网:英伦风格,舒适的鞋子
2017/12/28 全球购物
澳大利亚窗帘商店:Curtain Wonderland
2019/12/01 全球购物
普通党员群众路线教育实践活动心得体会
2014/11/04 职场文书
公司管理制度范本
2015/08/03 职场文书
深入理解Vue的数据响应式
2021/05/15 Vue.js
“鬼灭之刃”热度不减,其成功背后的原因是什么?
2022/03/22 日漫