动态加载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 相关文章推荐
JS 学习笔记 防止发生命名冲突
Jul 30 Javascript
JS创建类和对象的两种不同方式
Aug 08 Javascript
简述jQuery ajax的执行顺序
Jan 05 Javascript
Bootstrap三种表单布局的使用方法
Jun 21 Javascript
学习vue.js表单控件绑定操作
Dec 05 Javascript
微信小程序 setData的使用方法详解
Apr 20 Javascript
JS实现百度搜索接口及链接功能实例代码
Feb 02 Javascript
使用ng-packagr打包Angular的方法示例
Sep 21 Javascript
jQuery模拟html下拉多选框的原生实现方法示例
May 30 jQuery
vue h5移动端禁止缩放代码
Oct 28 Javascript
jQuery 选择器用法基础入门示例
Jan 04 jQuery
Nest.js散列与加密实例详解
Feb 24 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抓即时股票信息
2006/10/09 PHP
PHP批量上传图片的具体实现方法介绍.
2014/02/26 PHP
PHP中的output_buffering详细介绍
2014/09/27 PHP
两千行代码的PHP学习笔记汇总
2014/10/05 PHP
php模拟post上传图片实现代码
2016/06/24 PHP
[原创]PHPCMS遭遇会员投稿审核无效的解决方法
2017/01/11 PHP
php实现基于PDO的预处理示例
2017/03/28 PHP
js判断变量是否空值的代码
2008/10/26 Javascript
jQuery 隔行换色 支持键盘上下键,按Enter选定值
2009/08/02 Javascript
【JS+CSS3】实现带预览图幻灯片效果的示例代码
2016/03/17 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
2016/05/10 Javascript
JS之获取样式的简单实现方法(推荐)
2016/09/13 Javascript
纯原生js实现贪吃蛇游戏
2020/04/16 Javascript
Vue.js tab实现选项卡切换
2017/05/16 Javascript
webpack4 SCSS提取和懒加载的示例
2018/09/03 Javascript
详解在网页上通过JS实现文本的语音朗读
2019/03/28 Javascript
微信小程序 this.triggerEvent()的具体使用
2019/12/10 Javascript
JavaScript闭包原理与用法学习笔记
2020/05/29 Javascript
JavaScript浅层克隆与深度克隆示例详解
2020/09/01 Javascript
jquery实现简单每周轮换的日历
2020/09/10 jQuery
朴素贝叶斯算法的python实现方法
2014/11/18 Python
解析Python中的异常处理
2015/04/28 Python
深入理解python函数递归和生成器
2016/06/06 Python
使用Python爬了4400条淘宝商品数据,竟发现了这些“潜规则”
2018/03/23 Python
python 3.7.0 安装配置方法图文教程
2018/08/27 Python
Pycharm中Python环境配置常见问题解析
2020/01/16 Python
tensorflow mnist 数据加载实现并画图效果
2020/02/05 Python
Python爬虫爬取电影票房数据及图表展示操作示例
2020/03/27 Python
Python Tricks 使用 pywinrm 远程控制 Windows 主机的方法
2020/07/21 Python
纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
2014/05/07 HTML / CSS
html5 实现客户端验证上传文件的大小(简单实例)
2016/05/15 HTML / CSS
《蜗牛的奖杯》教后反思
2014/04/24 职场文书
大学学生会竞选稿
2015/11/19 职场文书
小学班长竞选稿
2015/11/20 职场文书
python3读取文件指定行的三种方法
2021/05/24 Python
利用Python实现Picgo图床工具
2021/11/23 Python