2022年10月19日

layui弹窗调用iframe页面定义的方法 亲测可用


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

layui

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

父页面


$("#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 方法

  1. 子页面获取父页面元素:

格式:$(“#父页面元素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

标签:, , ,

微信扫一扫二维码访问


16年前端经验
加微信好友直接沟通
了解《我的十年》