动态加载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 相关文章推荐
超级强大的表单验证
Jun 26 Javascript
从零开始学习jQuery (六) jquery中的AJAX使用
Feb 23 Javascript
iframe父页面获取子页面参数的方法
Feb 21 Javascript
Node.js事件驱动
Jun 18 Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
Jun 13 Javascript
微信小程序 picker 组件详解及简单实例
Jan 10 Javascript
彻底理解js面向对象之继承
Feb 04 Javascript
关于vue面试题汇总
Mar 20 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)
Jan 24 Javascript
ES6 Symbol数据类型的应用实例分析
Jun 26 Javascript
vue 解决form表单提交但不跳转页面的问题
Oct 30 Javascript
vue 使用lodash实现对象数组深拷贝操作
Sep 10 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判断字符以及字符串的包含方法属性
2008/08/30 PHP
php mysql Errcode: 28 终极解决方法
2009/07/01 PHP
Yii2 输出xml格式数据的方法
2016/05/03 PHP
PHP使用函数用法详解
2018/09/30 PHP
PhpStorm 如何优雅的调试Hyperf的方法步骤
2019/11/24 PHP
JavaScript语法着色引擎(demo及打包文件下载)
2007/06/13 Javascript
基于jquery的代码显示区域自动拉长效果
2011/12/07 Javascript
javascript 事件处理程序介绍
2012/06/27 Javascript
使用jQuery清空file文件域的解决方案
2013/04/12 Javascript
JQuery.Ajax之错误调试帮助信息介绍
2013/07/04 Javascript
js和jquery如何获取图片真实的宽度和高度
2014/09/28 Javascript
javascript实现十秒钟后注册按钮可点击的方法
2015/05/13 Javascript
基于JavaScript实现TAB标签效果
2016/01/12 Javascript
JQuery实现DIV其他动画效果的简单实例
2016/09/18 Javascript
jQuery插件ajaxFileUpload异步上传文件
2016/10/19 Javascript
浅谈regExp的test方法取得的值变化的原因及处理方法
2017/03/01 Javascript
jQuery EasyUI 组件加上“清除”功能实例详解
2017/04/11 jQuery
JavaScript多线程运行库Nexus.js详解
2017/12/22 Javascript
JavaScript基础心法 数据类型
2018/03/05 Javascript
vue组件从开发到发布的实现步骤
2018/11/11 Javascript
vant(ZanUi)结合async-validator实现表单验证的方法
2018/12/06 Javascript
vue2 v-model/v-text 中使用过滤器的方法示例
2019/05/09 Javascript
vue如何获取自定义元素属性参数值的方法
2019/05/14 Javascript
JS中封装axios来管控api的2种方式
2019/09/11 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
2020/10/28 Javascript
python调用cmd命令行制作刷博器
2014/01/13 Python
对python3新增的byte类型详解
2018/12/04 Python
树莓派与PC端在局域网内运用python实现即时通讯
2019/06/22 Python
Python企业编码生成系统之系统主要函数设计详解
2019/07/26 Python
网络方面基础面试题
2012/11/16 面试题
写好自荐信要注意的问题
2013/11/10 职场文书
员工生日活动方案
2014/08/24 职场文书
2015年初三班主任工作总结
2015/05/21 职场文书
班主任工作经验交流会总结
2015/11/02 职场文书
干部理论学习心得体会
2016/01/21 职场文书
Golang并发工具Singleflight
2022/05/06 Golang