动态加载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 09 Javascript
有一段有意思的代码-javascript现实多行信息
Aug 26 Javascript
Array.prototype.slice.apply的使用方法
Mar 17 Javascript
JScript分割字符串示例代码
Sep 04 Javascript
JAVASCRIPT模式窗口中下载文件无法接收iframe的流
Oct 11 Javascript
javascript使用正则表达式实现去掉空格之后的字符
Feb 15 Javascript
深入学习JavaScript中的Rest参数和参数默认值
Jul 28 Javascript
AngularJs  Creating Services详解及示例代码
Sep 02 Javascript
详解Vue、element-ui、axios实现省市区三级联动
May 07 Javascript
javascript设计模式 ? 外观模式原理与用法实例分析
Apr 15 Javascript
关于angular 8.1使用过程中的一些记录
Nov 25 Javascript
TypeScript 使用 Tuple Union 声明函数重载
Apr 07 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抓取蜘蛛爬虫痕迹的示例代码
2016/09/30 PHP
PHP使用微信开发模式实现搜索已发送图文及匹配关键字回复的方法
2017/09/13 PHP
PHP长连接实现与使用方法详解
2018/02/11 PHP
PHP CURL中传递cookie的方法步骤
2019/05/09 PHP
jquery 简单导航实现代码
2009/09/11 Javascript
了解一点js的Eval函数
2012/07/26 Javascript
JavaScript与DOM组合动态创建表格实例
2012/12/23 Javascript
jQuery实现用方向键控制层的上下左右移动
2013/01/13 Javascript
node.js中Socket.IO的进阶使用技巧
2014/11/04 Javascript
js获取会话框prompt的返回值的方法
2015/01/10 Javascript
js实现仿阿里巴巴城市选择框效果实例
2015/06/24 Javascript
微信小程序 SocketIO 实例讲解
2016/10/13 Javascript
JavaScript面向对象分层思维全面解析
2016/11/22 Javascript
AngularJS学习第二篇 AngularJS依赖注入
2017/02/13 Javascript
使用jquery模拟a标签的click事件无法实现跳转的解决
2018/12/04 jQuery
详解一个基于套接字实现长连接的express
2019/03/28 Javascript
使用webpack搭建vue环境的教程详解
2019/12/31 Javascript
基于javascript的无缝滚动动画实现2
2020/08/07 Javascript
[01:04:14]OG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python 安装setuptools和pip工具操作方法(必看)
2017/05/22 Python
Python版名片管理系统
2018/11/30 Python
python并发编程多进程 互斥锁原理解析
2019/08/20 Python
使用opencv将视频帧转成图片输出
2019/12/10 Python
python虚拟环境模块venv使用及示例
2020/03/04 Python
使用Python判断一个文件是否被占用的方法教程
2020/12/16 Python
html5 canvas实现圆形时钟代码分享
2013/12/25 HTML / CSS
美国隐形眼镜网:Major Lens
2018/02/09 全球购物
First Aid Beauty官网:FAB急救面霜
2018/05/24 全球购物
2014年餐厅服务员工作总结
2014/11/18 职场文书
医生个人年度总结
2015/02/28 职场文书
投资申请报告
2015/05/19 职场文书
决心书格式及范文
2019/06/24 职场文书
浅谈什么是SpringBoot异常处理自动配置的原理
2021/06/21 Java/Android
golang实现浏览器导出excel文件功能
2022/03/25 Golang
vue 自定义的组件绑定点击事件
2022/04/21 Vue.js
Spring Security动态权限的实现方法详解
2022/06/16 Java/Android