iframe多窗口

摘要:
但是,如果一个文档定义了一个或多个框架,浏览器就会为原始文档创建一个window对象,再为每个框架创建额外的window对象。这些额外的对象是原始窗口的子窗口,可能被原始窗口中发生的事件所影响。例如,关闭原始窗口将导致关闭全部子窗口。如果想要创建新窗口,可以使用像open,showModalDialog和showModelessDialog这样的方法。

Window 对象

浏览器会在其打开一个 HTML 文档时创建一个对应的 window 对象。但是,如果一个文档定义了一个或多个框架(即,包含一个或多个 frame 或 iframe 标签),浏览器就会为原始文档创建一个 window 对象,再为每个框架创建额外的 window 对象。这些额外的对象是原始窗口的 子窗口,可能被原始窗口中发生的事件所影响。例如,关闭原始窗口将导致关闭全部子窗口。如果想要创建新窗口(以及对应的 window 对象),可以使用像 open, showModalDialog 和 showModelessDialog 这样的方法。

contentWindow 属性

contentWindow属性是指指定的frame或者iframe所在的window对象

var ifr = document.getElementById("iframe");
var contentWindow = ifr.contentWindow.document.getElementById("XXXXX");

contentWindow.method();
在iframe页面操作父页面DoM元素(即嵌套这个iframe的页面)可以用:
window.parent.  

window.top.  (这里的TOP是获取的顶层,即有多层嵌套iframe的时候使用)

===========================================================
1 /**
2 * 人员选择
3 * @param fieldName 字段名称(同时也是回显控件的ID)
4 * @param type 控件类型(1:单选, 2: 多选)
5 * */
6 function userSelect(fieldName, type, callback) {    
7 layer.open({
8 type: 2  //此处以iframe举例
9 , title: "选择用户"
10 , area: ['800px', ($(window).height())+'px']
11 , shade: 0
12 , offset:'rb',
13 scrollbar: false,
14 shade:0.5,
15 shift: 2,
16 fixed:false,
17 resize:false,
18 scrollbar:true,
19 move:false
20 , maxmin: false
21 , content: 'appDataController.do?userSelect&type='+type    //(url)
22 , zIndex: layer.zIndex //重点1
23 , success: function (layero) {
24 layer.setTop(layero); //重点2
25 }
26 , btn: ['确定']
27 , yes: function(index){
28 
29 //获得iframe的窗口对象
30 var child = 'layui-layer-iframe'+index;
31 $child = $("#"+child)[0].contentWindow;
32 
33 //调用iframe的方法
34 var data =$child.getUser();
35 callback(fieldName, data);
36 layer.close(index);
37 }
38 });
39 }

另外一种layer,父子页面交互

var child = 'layui-layer-iframe'+index;
$child = $("#"+child)[0].contentWindow;
var data = $child.submit();

还有一个  

var iframeWin = window[layero.find('iframe')[0]['name']];
iframeWin.resetSelect();

免责声明:文章转载自《iframe多窗口》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇InstallShield学习笔记二:组件配置如何恢复通达oa文件柜中删除的文件附件下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

Iframe父子窗口之间的跨域事件调用和传值

实现方案1:location.hash传值 父页面:parent.html(所在域:www.parent.com) 子页面:child.html(所在域:www.child.com) 要实现父子页面双向的事件调用和传值,需要多加一个代理页面,主要用于子页面调用父页面的方法 代理页面:proxy.html(所在域:www.parent.com)必须与父页面在...

Javascript跨域问题解决方案

---本方法来自网上,因最近项目需求,解决了三天未果,最终发现此文并测试可用。 一个 非常优雅绝妙的解决方案!话不多说,直接上解决方案原理图: 该图要解决的问题说明如下:在AAA.com域名下的index.htm页面中内嵌了BBB.com域名下的一个页面index.htm,正常情况下iframe内部的index.htm页面是无法访问父页面index.ht...

HTML里面include其他文件的方法

在html文件引入其它html文件的几种方法简介:在论坛中常常有网友问到,可以在一个html的文件当中读取另一个html文件的内容吗?答案是确定的,而且方法不只一种,在以前我只会使用iframe来引用,后来发现了另外的几种方法,那今天就总结这几种方法让大家参考一下,本人觉得第三种方式较好! 1.IFrame引入,看看下面的代码 <IFRAME NAM...

iframe标签

今天向大家介绍一个标签的使用,Iframe标签,该标签可以被称之为伪Ajax,在ajax还没怎么盛行之时,大家为了提高客户端的用户体验,实现页面的局部刷新就是使用frame标签的,确实,上次我使用该标签也是看中了它的局部刷新: 使用的效果图: 如上图所示左边是导航栏,右边是点击导航后显示的页面,实现的功能就是点击左边的导航栏,不进行页面的整体刷新,而是直...

iframe中插入代码并执行

最近有需求通过iframe插入代码。有蛮多方法,如下: 1 var iframe = document.getElementById('previewUrl'); 2 iframe.src = 'about:blank'; 3 iframe.contentWindow.document.body.innerHTML+="12312" 4 iframe.co...

关于iframe中的js跨站

iframe中的js跨站的问题很是头痛,关于js跨站的方法可以参考 wujiajun1020。 这里结合我遇到的情况讲讲我的处理方法,我的情况是要在各个站点中调用其中某一个站点的登录页,来达到统一登录的目的(这里详述单点登录了)。在不同站点下调用某一个站点的登录页面,想了想还是用iframe吧,iframe还是很强大的。于是用js写了一个遮罩效果的dial...