一个网站切图项目中遇到的需求，用layui去弹出一个iframe的弹窗，并且需要在点击弹窗的确定按钮的时候，获取iframe页面的数据，而iframe内嵌页有复杂的交互和数据逻辑，所以决定在iframe页面中定义好获取数据的方法，然后去调取iframe中定义好的方法。

这就涉及到了父页面调用子页面的定义的方法了，以下为代码片段，亲测可用。

父页面

$("#btnSetTableHeader").click(function () {
//设置表头
layer.open({
type: 2,
title: "设置表头",
content: "setTableHeader.html",
maxmin: true,

area: ["575px", "750px"],
btn: ["确定", "取消"],
yes: function (index, layero) {

//调用子页面定义方法
layero.find('iframe')[0].contentWindow.getdatafunc();

},
});
});

如果提示 .contentWindow.demo is not a function ，那可以试试当iframe加载完成后在执行方法，代码如下：

$(‘iframe’).onload = function() { this.contentWindow.demo(_maproot); };

子页面

//定义函数 外部可用
var getdatafunc = function(){

var getData = transfer.getData('demo1');
console.log(getData)

}

 

扩展资料（父页面、子页面相互操作的方法锦集）

1. 父页面获取子页面元素：格式：$(“#iframe的ID”).contents().find(“#iframe中的控件ID”).click();

   实例：$(“#ifm”).contents().find(“#iBtnOk”).click(); // ifm 为 标签 id; iBtnOk 为子页面按钮 id

2. 父页面调用子页面方法：

格式：$(“#iframe的ID”)[0].contentWindow.iframe方法();

实例：$(“#ifm”)[0].contentWindow().iClick(); // ifm 为 标签 id; iClick为子页面 js 方法

3. 子页面获取父页面元素：

格式：$(“#父页面元素id” , parent.document);

实例：$(“#pBtnOk” , parent.document).click(); // pBtnOk 为父页面标签 id

2
原生 js 父页面元素的获取，方法的调用：

1. 子页面调用父页面方法：格式：parent.父页面方法

   实例：parent.pClick(); // pClick 为父页面 js 方法

2. 子页面获取父页面元素：格式：window.parent.document.getElementById(“父窗口元素ID”)

   实例：window.parent.document.getElementById(“pBtnOk”);// pBtnOk为父页面标签 id

标签：iframe, layer, layui, 弹窗