动态加载js、css等文件跨iframe实现

 更新时间:2014年02月24日 15:17:00   作者:  
这篇文章主要介绍了动态加载js、css等文件跨iframe实现的方法,需要的朋友可以参考下
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");
}
}

相关文章

  • 微信小程序保持session会话的方法

    微信小程序保持session会话的方法

    这篇文章主要介绍了微信小程序保持session会话的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03
  • JavaScript圣杯布局与双飞翼布局实现案例详解

    JavaScript圣杯布局与双飞翼布局实现案例详解

    这篇文章主要介绍了JavaScript圣杯布局与双飞翼布局实现案例,这是前端面试中需要掌握的知识点,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • 基于Bootstrap框架实现图片切换

    基于Bootstrap框架实现图片切换

    这篇文章主要介绍了基于Bootstrap框架实现图片切换的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-03-03
  • js this 绑定机制深入详解

    js this 绑定机制深入详解

    这篇文章主要介绍了js this 绑定机制,结合实例形式深入分析了js this 绑定机制相关原理、使用技巧与操作注意事项,需要的朋友可以参考下
    2020-04-04
  • require导入module.exports 或 exports导出的使用方法

    require导入module.exports 或 exports导出的使用方法

    module.exports用于导出整个模块的内容,可以通过赋值给 module.exports 导出一个对象、函数或值,导出的内容可以被其他模块通过require 导入,本文给大家介绍require导入module.exports 或 exports导出的使用,感兴趣的朋友一起看看吧
    2023-11-11
  • JS实现仿百度文库评分功能

    JS实现仿百度文库评分功能

    本文给大家分享基于js实现仿百度文库评分功能,代码简单易懂,非常不错,具有参考借鉴价值,需要的的朋友参考下吧
    2017-01-01
  • javascript获取文档坐标和视口坐标

    javascript获取文档坐标和视口坐标

    制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置。下面的教程总结了Javascript在网页定位方面的相关知识。有需要的小伙伴可以参考下。
    2015-05-05
  • 详解JavaScript的原型与原型链

    详解JavaScript的原型与原型链

    这篇文章主要为大家详细介绍了JavaScript原型与原型链,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-03-03
  • javascript Deferred和递归次数限制实例

    javascript Deferred和递归次数限制实例

    你知道Deferred和递归次数限制吗?如果还不知道,可以看看下面的实例,很好,适合新手朋友们
    2014-10-10
  • 给moz-firefox下添加IE方法和属性

    给moz-firefox下添加IE方法和属性

    给moz-firefox下添加IE方法和属性...
    2007-04-04

最新评论