`

IFrame 的使用

    博客分类:
  • JS
 
阅读更多

--iframe中调用父窗口的js

window.parent.uploadfile();

 

--iframe 父窗口和子窗口的调用方法

父窗口调用子窗口

iframe_id.myH1.innerText=

子窗口调用父窗口

parent.myH1.innerText=

 

父窗口调用子窗口 
window.frames["iframe的id"].document.getElementById("iframe中的id"?)

子窗口调用父窗口 
parent.document.getElementById("父页面中的Id")

子窗口调用父窗口的方法:

window.parent.closedivtree();

 

<iframe id="topPage" width="100%" height="100%" frameborder=0></iframe>
<script type="text/javascript">
          document.getElementById("topPage").src=

         '${formUrl}&processInstanceId='+'${tib.processInstanceId}'+'&head='+

         encodeURIComponent(encodeURIComponent('${head}'));
</script>

 

--iframe有一个属性,可以在家完成一个后再次加载后面的Iframe

onreadystatechange="if(this.readyState=='complete')loadBill();"

 

--下面是细化方法,

一般来说,我们判断 iframe 是否加载完成其实与 判断 JavaScript 文件是否加载完成 采用的方法很类似:

var iframe = document.createElement("iframe");
iframe
.src ="http://www.planabc.net";

if(!/*@cc_on!@*/0){//if not IE
    iframe
.onload =function(){
        alert
("Local iframe is now loaded.");
   
};
}else{
    iframe
.onreadystatechange =function(){
       
if(iframe.readyState =="complete"){
            alert
("Local iframe is now loaded.");
       
}
   
};
}

document
.body.appendChild(iframe);

 

--最近, Nicholas C. Zakas 文章《Iframes, onload, and document.domain》的评论中 Christopher 提供了一个新的判断方法(很完美)

var iframe = document.createElement("iframe");
iframe
.src ="http://www.planabc.net";

if(iframe.attachEvent){
    iframe
.attachEvent("onload",function(){
        alert
("Local iframe is now loaded.");
   
});
}else{
    iframe
.onload =function(){
        alert
("Local iframe is now loaded.");
   
};
}

document
.body.appendChild(iframe);

 

几点补充说明:

  1. IE 支持 iframe 的 onload 事件,不过是隐形的,需要通过 attachEvent 来注册。
  2. 第二种方法比第一种方法更完美,因为 readystatechange 事件相对于 load 事件有一些潜在的问题。
分享到:
评论
发表评论

文章已被作者锁定,不允许评论。

相关推荐

    iframe使用实例

    &lt;title&gt;iframe使用示例 使用iframe加载外部页面 &lt;iframe src="https://www.example.com" width="800" height="600"&gt;&lt;/iframe&gt; ``` 在这个例子中,网页将加载`https://www.example.com`的内容到`iframe`中...

    Iframe使用帮助

    【Iframe 使用帮助】 Iframe,全称 Inline Frame,是一种HTML标签,用于在网页中嵌入另一个HTML文档,实现文档的“文档中的文档”。它类似于浮动框架(FRAME),但更灵活,可以在页面任意位置插入,并且可以独立于...

    Flex项目Google IFrame使用

    然而,在实际应用中,可能会遇到一些问题,比如IFrame内容消失等,这就需要我们深入理解IFrame的工作原理以及如何在Flex中正确使用它。 首先,让我们了解Flex中的IFrame是如何工作的。Flex是基于ActionScript 3的...

    嵌套iFrame使用postMessage相互传递消息(嵌套iFrame、跨父子窗口、跨页面).zip

    练习说明:使用postMessage可以在iFrame、父子窗口、跨页面等,之间相互传递消息。 你好,我是TKCB-GO,一个有着游戏策划梦想,却沦为程序员的游戏家,这是我的技术博客:www.tkcb.cc 技术博客网站里面,除了我的...

    js处理iframe的系列问题

    // 也可以使用getElementById window.frames["ifrMapCompanyDetails"].document.getElementById("txtAddress").value = '地址'; ``` #### 3. 在服务器端设置`iframe`内部元素的值 有时候我们可能需要在服务器端...

    iframe使用post数据方式显示

    ### 使用iframe与POST方法传输数据 #### 一、引言 在Web开发中,`&lt;iframe&gt;`(Inline Frame)是一种常用的HTML元素,用于在当前页面内嵌入另一个HTML文档。这种方式能够有效地实现在一个页面中展示不同的内容或功能...

    基于iframe的js动态标签tab

    4. **动态加载内容**:如果IFrame的内容是动态的(比如来自不同的URL),则需要使用JavaScript的`document.createElement('iframe')`创建IFrame对象,设置其`src`属性为所需URL,然后将其插入到DOM中。 5. **优化和...

    lhgdialog文件加跨iframe框架使用

    从提供的压缩包文件名来看,"lhgdialog_jb51.net.rar"可能包含了lhgDialog的基础文件,而"lhgdialog跨框架iframe弹出层.rar"则可能包含了关于跨iframe使用对话框的示例代码或扩展功能。在实际操作中,你需要解压这些...

    iframe详细用法

    iframe详细用法iframe详细用法iframe详细用法iframe详细用法iframe详细用法

    解决双iframe互相刷新进入死循环的问题

    在网页开发中,有时我们可能需要使用到iframe来嵌入其他页面或实现一些特定功能,例如页面间的通信、模块化加载等。然而,在处理多个iframe交互时,可能会遇到一个棘手的问题——双iframe互相刷新进入死循环。这个...

    关于iframe跨域POST提交的方法示例

    所以自己对跨域有一定的概念性了解,知道什么是跨域以及解决跨域的方法,但是具体实际从来没有操作过,直到最近在公司项目中,遇到了一个需要使iframe跨域进行POST提交的实际案例,我才明白具体如何使用iframe进行...

    iframe与父页面传值(方法互调)

    在`iframe`内的页面,我们可以使用`parent`对象来访问父页面的全局变量和函数。例如,如果在`iframe`内想要调用父页面的一个名为`parentFunction`的函数,可以这样写: ```javascript parent.parentFunction(); ```...

    关于iframe的用法

    1. **内容聚合**:网站可以使用iframe展示来自不同来源的内容,如新闻、天气预报或者社交媒体动态。 2. **页面部分更新**:在不刷新整个页面的情况下,通过iframe更新特定区域的信息,提高用户体验。 3. **广告嵌入*...

    angular-through-iframe:如何通过 iframe 使用 angular.js

    本篇文章将详细探讨“如何通过iframe使用Angular.js”。 首先,我们需要理解iframe的基本概念。Iframe(Inline Frame)是HTML中的一个元素,它允许我们在网页中嵌入另一个完整的网页。通过iframe,我们可以加载来自...

    flex-iframe-1.4.1.zip

    当我们谈论"flex-iframe-1.4.1.zip"时,我们关注的是一个专门优化iframe使用体验的库,Flex-Iframe 1.4.1。这个版本不仅提供了基本的iframe功能,还考虑了向下兼容性,确保在不同版本的浏览器上都能顺畅运行。 Flex...

    iframe框架使用(完美版)

    "iframe框架使用(完美版)"这一主题着重讲解了如何高效、灵活地运用iframe,并解决其中的一些常见问题,如自适应高度的设定以及通过JavaScript进行封装。 首先,我们要理解iframe的基本用法。`&lt;iframe&gt;`标签通常包含...

    网页制作中Iframe自适应高度的解决办法

    Iframe使用`flex: 1`属性,意味着它将占据所有可用的空间,从而达到自适应高度的效果。 3. 使用`postMessage`通信: 当Iframe跨域时,JavaScript直接获取内容高度的方法可能受限于同源策略。这时可以利用`window....

    artDialog,demo,iframe

    "artDialogDemo" 这个文件名可能是包含所有示例代码的主目录或者文件,它将展示如何在实际项目中集成和使用artDialog,以及如何与iframe结合使用。 **详细知识讲解:** 1. **artDialog插件**:artDialog是一个高...

    网页模板——jQuery内嵌iframe导航菜单特效源码.zip

    4. **iframe使用**:每个菜单项会链接到一个或多个iframe,这些iframe会加载不同的页面内容。 5. **响应式设计**:由于现代网站需要适应不同设备的屏幕尺寸,源码可能包含媒体查询来实现响应式布局,确保在手机、...

    vue基于iframe优雅实现全新的微前端方案,继承iframe的优点,补足 iframe 的缺点,让 iframe 焕发新生

    内容概要:以vue2为例,搭建一个左侧导航与顶部导航的二级导航的iframe框架项目。...3、使用requestFullscreen()解决iframe里的全屏问题 4、使用history解决浏览器的后退问题 5、页面刷新,iframe可以加载正确页面

Global site tag (gtag.js) - Google Analytics