iframe 小方法集合


1、js在子窗口获取父窗口的window
window.parent
//此时可以调用父窗口的window方法,比如获取父窗口的高度window.parent.innerHeight,宽度window.parent.innerWidth,移动父窗口的位置等,具体的可以看本人博客的《获取浏览器窗口的尺寸及对浏览器窗口的一些操作》篇。


2、js在父窗口获取子窗口的window

$("#testiframe")[0].contentWindow==document.getElementById("testiframe").contentWindow==window.frames[0]
以上三种都可以获取子窗口的window,上面三种对应的<body>如下所示:

<div style="border:1px solid black;">
<iframe id='testiframe' height='400' width='600' src='xxxxx'></iframe>
</div>


3、jquery在iframe子页面获取父页面元素代码如下:
$("#objid",parent.document);


4、jquery在父页面获取iframe子页面的元素
代码如下:
$("#objid",document.frames('iframename').document)


5、js在iframe子页面获取父页面元素代码如下:
window.parent.document.getElementById("元素id");


6、js在父页面获取iframe子页面元素代码如下:
window.frames["iframe_ID"].document.getElementByIdx_x("元素id");


7、子窗口iframe内调用父窗口函数:
parent.func();
//前提是父窗口的js中必须有func()这个方法。


8、父窗口中调用子窗口函数
document.getElementById(子窗口 ifram 元素的ID值).contentWindow.子窗口中的方法()
子窗口 ifram 元素的name值.window.子窗口中的方法()


一:layer.open中iframe子父页面的元素与方法相互调用

1:父页面中js

layer.open({
type: 2 //此处以iframe举例
,
title: '<img width="20px" src="image/logo.png" alt="" /><span style="margin-left:10px">添加质量投诉记录</span>',
area: ['700px', '90%'],
offset: "rb",
content: 'views/qualityManagement/qualityComplaintRecord/newaddRecord.html',
zIndex: layer.zIndex,
success: function(layero,index) {
top.layer.setTop(layero); //重点2

   var body = layer.getChildFrame('body', index);
   var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象,执行iframe页的方法

    iframeWin.method();           

                                            //js在父窗口获取子窗口的window
    $("#testiframe")[0].contentWindow==document.getElementById("testiframe").contentWindow==window.frames[0]

                                           // 在父页面获取iframe子页面的元素

                                            $("#objid",document.frames('iframename').document)

                                              body.find('input').val('Hi,我是从父页来的')

                                        $('#default', iframeWin.document).val();

},

cancel:function(){
},
end:function(){
}
});

2:子页面中js

$(".addRecord_submit").click(function() {
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
parent.layer.close(index); //再执行关闭

//子页面调用父页面函数

parent.method();

//js在子窗口获取父窗口的window

window.parent

//子页面获取父页面元素
$('#id', window.parent.document).val();

})


二:parent.layer.open中iframe页面的元素与方法相互调用

parent.layer.open({
type: 2 //此处以iframe举例
,
title: '<img width="20px" src="image/logo.png" alt="" /><span style="margin-left:10px">添加质量投诉记录</span>',
area: ['700px', '90%'],
offset: "rb",
content: 'views/qualityManagement/qualityComplaintRecord/newaddRecord.html',
zIndex: layer.zIndex,
success: function(layero,index) {
top.layer.setTop(layero); //重点2

                       var body = layer.getChildFrame('body', index);

                                                  //j获取窗口的window
var p1aentIfarame = layero.find("iframe")[0].contentWindow;

var paentIfarame = layero.find("iframe")[0].contentWindow.document;

         p1aentIfarame.method();

                                                 // 在父页面获取iframe子页面的元素

                                         $('#default', paentIfarame).val()

                                                $(".addRecord_submit", paentIfarame).click(function() {})

},

cancel:function(){
},
end:function(){
}

});


 三:根据iframe名称获取iframe页面方法及元素

window.name  获取当前iframe 名称
window. parent.name  获取父级iframe 名称

window.parent.frames[iframeName]  获取父级中iframe 名为iframeName的当前窗口对象,通过这个可以获取页面方法比如:window.parent.frames[iframeName].productListData()

window.parent.frames[iframeName].document

$(window.parent.frames[iframeName].document).find(".productList").val() 获取元素的值




猜你喜欢

转载自blog.csdn.net/qq_24892029/article/details/79641437