动态加载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 事件流和事件绑定
Jul 16 Javascript
js计算页面刷新的次数
Jul 20 Javascript
js简单实现交换Li的值
May 22 Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
Mar 02 Javascript
avalonjs制作响应式瀑布流特效
May 06 Javascript
JS实现动态生成表格并提交表格数据向后端
Nov 25 Javascript
原生javascript实现匀速运动动画效果
Feb 26 Javascript
canvas 绘制圆形时钟
Feb 22 Javascript
Vue 进阶教程之v-model详解
May 06 Javascript
Node.js开发第三方微信公众平台
Jun 05 Javascript
vue.js使用v-pre与v-html输出HTML操作示例
Jul 07 Javascript
微信小程序websocket聊天室的实现示例代码
Feb 12 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+AJAX传送中文会导致乱码的问题的解决方法
2008/09/08 PHP
php实现window平台的checkdnsrr函数
2015/05/27 PHP
PHP实现查询两个数组中不同元素的方法
2016/02/23 PHP
tp5.0框架隐藏index.php入口文件及模块和控制器的方法分析
2020/02/11 PHP
在网页中屏蔽快捷键
2006/09/06 Javascript
[原创]保存的js无法执行的解决办法
2007/02/25 Javascript
JS处理VBArray的函数使用说明
2008/05/11 Javascript
jQuery formValidator表单验证插件开源了 含API帮助、源码、示例
2008/08/14 Javascript
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
2009/10/25 Javascript
jquery 元素相对定位代码
2010/10/15 Javascript
js中如何把字符串转化为对象、数组示例代码
2013/07/17 Javascript
编写js扩展方法判断一个数组中是否包含某个元素
2013/11/08 Javascript
JQuery Highcharts 动态生成图表的方法
2013/11/15 Javascript
jQuery中:disabled选择器用法实例
2015/01/04 Javascript
JavaScript之Object类型介绍
2015/04/01 Javascript
angularjs中使用ng-bind-html和ng-include的实例
2017/04/28 Javascript
layui文件上传实现代码
2017/05/20 Javascript
Vue利用路由钩子token过期后跳转到登录页的实例
2017/10/26 Javascript
bootstrap 通过加减按钮实现输入框组功能
2017/11/15 Javascript
基于vue2实现左滑删除功能
2017/11/28 Javascript
利用Node.js检测端口是否被占用的方法
2017/12/07 Javascript
javascript中this的用法实践分析
2019/07/29 Javascript
简单了解JavaScript arguement原理及作用
2020/05/28 Javascript
Python获取网页上图片下载地址的方法
2015/03/11 Python
Python断言assert的用法代码解析
2018/02/03 Python
Django框架实现的普通登录案例【使用POST方法】
2019/05/15 Python
python 多线程对post请求服务器测试并发的方法
2019/06/13 Python
Python json格式化打印实现过程解析
2020/07/21 Python
Python 通过爬虫实现GitHub网页的模拟登录的示例代码
2020/08/17 Python
python使用隐式循环快速求和的实现示例
2020/09/11 Python
CSS3+font字体文件实现圆形半透明菜单具体步骤(图解)
2013/06/03 HTML / CSS
华为的Java面试题
2014/03/07 面试题
酒店总经理欢迎词
2014/01/08 职场文书
2015年仓库工作总结
2015/04/09 职场文书
我的中国梦心得体会范文
2016/01/05 职场文书
阿里云服务器部署RabbitMQ集群的详细教程
2022/06/01 Servers