动态加载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 Zifa FormValid 0.1表单验证 代码打包下载
Jun 08 Javascript
js自定义事件及事件交互原理概述(二)
Feb 01 Javascript
jquery Tab效果和动态加载的简单实例
Dec 11 Javascript
jquery中post方法用法实例
Oct 21 Javascript
javascript判断变量是否有值的方法
Apr 20 Javascript
js实现仿Windows风格选项卡和按钮效果实例
May 13 Javascript
JavaScript中Function函数与Object对象的关系
Dec 17 Javascript
Javascript HTML5 Canvas实现的一个画板
Apr 12 Javascript
Node.js 数据加密传输浅析
Nov 16 Javascript
promise处理多个相互依赖的异步请求(实例讲解)
Aug 03 Javascript
基于js 字符串indexof与search方法的区别(详解)
Dec 04 Javascript
微信小程序登录对接Django后端实现JWT方式验证登录详解
Jul 29 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
整理的一些实用WordPress后台MySQL操作命令
2013/01/07 PHP
浅析ThinkPHP中execute和query方法的区别
2014/06/13 PHP
php基于base64解码图片与加密图片还原实例
2014/11/03 PHP
新浪微博OAuth认证和储存的主要过程详解
2015/03/27 PHP
PHP也能干大事之PHP中的编码解码详解
2015/04/20 PHP
php 使用html5实现多文件上传实例
2016/10/24 PHP
详解PHP swoole process的使用方法
2017/08/26 PHP
juqery 学习之三 选择器 可见性 元素属性
2010/11/25 Javascript
Javascript面向对象设计一 工厂模式
2011/12/20 Javascript
jquery实现带单选按钮的表格行选中时高亮显示
2013/08/01 Javascript
jQuery的one()方法用法实例
2015/01/19 Javascript
Java中Timer的用法详解
2015/10/21 Javascript
JavaScript获取当前运行脚本文件所在目录的方法
2016/02/03 Javascript
NodeJS使用formidable实现文件上传
2016/10/27 NodeJs
详解Angular.js的$q.defer()服务异步处理
2016/11/06 Javascript
5分钟快速掌握JS中var、let和const的异同
2018/09/19 Javascript
Vue商品控件与购物车联动效果的实例代码
2019/07/21 Javascript
基于Node的Axure文件在线预览的实现代码
2019/08/28 Javascript
浅谈Vue.js之初始化el以及数据的绑定说明
2019/11/14 Javascript
解决echarts图表使用v-show控制图表显示不全的问题
2020/07/19 Javascript
Python  连接字符串(join %)
2008/09/06 Python
python 获取字符串MD5值方法
2018/05/29 Python
python2.7和NLTK安装详细教程
2018/09/19 Python
详解将Django部署到Centos7全攻略
2018/09/26 Python
python 梯度法求解函数极值的实例
2019/07/10 Python
Python datetime 格式化 明天,昨天实例
2020/03/02 Python
python数据类型强制转换实例详解
2020/06/22 Python
大整数数相乘的问题
2012/07/22 面试题
大学应届生求职简历的自我评价
2013/10/08 职场文书
电子商务专业学生的自我鉴定
2013/11/28 职场文书
模具专业毕业推荐信
2014/03/08 职场文书
《红军不怕远征难》教学反思
2014/04/14 职场文书
2014年惩防体系建设工作总结
2014/12/01 职场文书
2016入党积极分子党课学习心得体会
2015/10/09 职场文书
Python使用UDP实现720p视频传输的操作
2021/04/24 Python
搭建Yolov5服务器
2022/04/30 Servers