动态加载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 相关文章推荐
基于jQuery的投票系统显示结果插件
Aug 12 Javascript
学习JavaScript设计模式(单例模式)
Nov 26 Javascript
jQuery实现div随意拖动的实例代码(通用代码)
Jan 28 Javascript
完美JQuery图片切换效果的简单实现
Jul 21 Javascript
IONIC自定义subheader的最佳解决方案
Sep 22 Javascript
基于JS实现checkbox全选功能实例代码
Oct 31 Javascript
codeMirror插件使用讲解
Jan 16 Javascript
Vue中如何实现proxy代理
Apr 20 Javascript
Vue模拟数据,实现路由进入商品详情页面的示例
Aug 31 Javascript
jQuery zTree插件使用简单教程
Aug 16 jQuery
Windows上node.js的多版本管理工具用法实例分析
Nov 06 Javascript
vue实现选中效果
Oct 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模板技术[转]
2007/01/04 PHP
PHP访问Google Search API的方法
2015/03/05 PHP
微信支付开发维权通知实例
2016/07/12 PHP
PHP读MYSQL中文乱码的快速解决方法
2016/10/01 PHP
详解php用curl调用接口方法,get和post两种方式
2017/01/13 PHP
PHP基于自增数据如何生成不重复的随机数示例
2017/05/19 PHP
laravel 框架配置404等异常页面
2019/01/07 PHP
php精度计算的问题解析
2019/06/21 PHP
jQuery 打造动态渐变按钮 详细图文教程
2010/04/25 Javascript
脚本合并提升javascript性能示例
2014/02/24 Javascript
JavaScript中split与join函数的进阶使用技巧
2016/05/03 Javascript
jQuery实现弹出带遮罩层的居中浮动窗口效果
2016/09/12 Javascript
详解Javascript获取缓存和清除缓存API
2017/05/25 Javascript
解决ie img标签内存泄漏的问题
2017/10/13 Javascript
Vue组件之单向数据流的解决方法
2018/11/10 Javascript
Vue CLI 3.x 自动部署项目至服务器的方法
2019/04/02 Javascript
Vue组件之高德地图地址选择功能的实例代码
2019/06/21 Javascript
vue实现百度搜索功能
2020/12/28 Javascript
jquery实现两个div中的元素相互拖动的方法分析
2020/04/05 jQuery
微信jssdk踩坑之签名错误invalid signature
2020/05/19 Javascript
Vue项目前后端联调(使用proxyTable实现跨域方式)
2020/07/18 Javascript
js实现验证码干扰(动态)
2021/02/23 Javascript
python下MySQLdb用法实例分析
2015/06/08 Python
python之pandas用法大全
2018/03/13 Python
Selenium元素的常用操作方法分析
2018/08/10 Python
对numpy下的轴交换transpose和swapaxes的示例解读
2019/06/26 Python
Pycharm+django2.2+python3.6+MySQL实现简单的考试报名系统
2019/09/05 Python
TensorFlow加载模型时出错的解决方式
2020/02/06 Python
python 两种方法修改文件的创建时间、修改时间、访问时间
2020/09/26 Python
加拿大最大的钻石商店:Peoples Jewellers
2018/01/01 全球购物
Theflamel意大利:女士奢华服装、鞋子和配件
2020/01/11 全球购物
腾讯技术类校园招聘笔试试题
2014/05/06 面试题
大学生党员个人剖析材料
2014/10/08 职场文书
2014年创先争优工作总结
2014/12/11 职场文书
安全事故隐患排查治理制度
2015/08/05 职场文书
安装配置mysql及Navicat prenium的详细流程
2021/06/10 MySQL