动态加载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 相关文章推荐
JScript中使用ADODB.Stream判断文件编码的代码
Jun 09 Javascript
JavaScript对象链式操作代码(jquery)
Jul 04 Javascript
ajax不执行success回调而是执行了error回调
Dec 10 Javascript
JS验证控制输入中英文字节长度(input、textarea等)具体实例
Jun 21 Javascript
jquery图片不完全按比例自动缩小的简单代码
Jul 29 Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
Dec 01 Javascript
javascript中bind函数的作用实例介绍
Sep 28 Javascript
深入浅析Extjs中store分组功能的使用方法
Apr 20 Javascript
常用原生JS兼容性写法汇总
Apr 27 Javascript
vue项目中使用ueditor的实例讲解
Mar 05 Javascript
JavaScript实用代码小技巧
Aug 23 Javascript
Vue实现腾讯云点播视频上传功能的实现代码
Aug 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&amp;&amp;mysql)一
2006/10/09 PHP
php5中date()得出的时间为什么不是当前时间的解决方法
2008/06/30 PHP
PHP实现懒加载的方法
2015/03/07 PHP
PHP文件操作方法汇总
2015/07/01 PHP
PHP封装的数据库保存session功能类
2016/07/11 PHP
thinkPHP模板引擎用法示例
2016/12/08 PHP
js创建子窗口并且回传值示例代码
2013/07/02 Javascript
自动设置iframe大小的jQuery代码
2013/09/11 Javascript
FF IE浏览器修改标签透明度的方法
2014/01/27 Javascript
jQuery实现下滑菜单导航效果代码
2015/08/25 Javascript
JavaScript实现QQ聊天消息展示和评论提交功能
2017/05/22 Javascript
jQuery选择器中的特殊符号处理方法
2017/09/08 jQuery
浅谈react受控组件与非受控组件(小结)
2018/02/09 Javascript
基于Angularjs-router动态改变Title值的问题
2018/08/30 Javascript
javascript中一些奇葩的日期换算方法总结
2018/11/14 Javascript
深度解读vue-resize的具体用法
2020/07/08 Javascript
原生js+css实现tab切换功能
2020/09/17 Javascript
Vue router安装及使用方法解析
2020/12/02 Vue.js
[14:57]DOTA2 HEROS教学视频教你分分钟做大人-幽鬼
2014/06/13 DOTA
python 3.6.4 安装配置方法图文教程
2018/09/18 Python
解决Python正则表达式匹配反斜杠''\''问题
2019/07/17 Python
在Python中使用MySQL--PyMySQL的基本使用方法
2019/11/19 Python
Pytorch之parameters的使用
2019/12/31 Python
Django --Xadmin 判断登录者身份实例
2020/07/03 Python
波兰补充商店:Muscle Power
2018/10/29 全球购物
介绍下Java的输入输出流
2014/01/22 面试题
汇源肾宝广告词
2014/03/20 职场文书
工厂门卫岗位职责范本
2014/04/04 职场文书
工厂搬迁方案
2014/05/11 职场文书
我是一名护士演讲稿
2014/08/28 职场文书
个人融资协议书
2014/10/02 职场文书
再读《皇帝的新衣》的读后感悟!
2019/08/07 职场文书
珍惜时间的诗歌赏析
2019/08/23 职场文书
Python实现天气查询软件
2021/06/07 Python
自从在 IDEA 中用了热部署神器 JRebel 之后,开发效率提升了 10(真棒)
2021/06/26 Java/Android
MySQL数据库实验之 触发器和存储过程
2022/06/21 MySQL