layui父页面调用子页面的渲染_Layui子页面iframe参数传递

从对象的获取上看，通过父获取子需要在繁多的id当中找到自己需要的那个，而通过子获取父则只需一个parent。因此在数据传递时，由子页面来主导更为合适。

类型一：

通过Layer打开的子页面

在这种方式中，我们先获取到数据，随后才渲染页面，因此选择直接将参数带到链接中；在子页面采用正则表达式解析链接，得到参数。

父

layer.open({

title: '编辑',

type: 2,

area: ['1000px', '500px'],

content: 'edit.html?id=' + dataid,

btn: ["保存", "取消"],

});

子

console.log(getQueryString("id"));

function getQueryString(name) {

var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');

var r = window.location.search.substr(1).match(reg);

if (r != null) {

return unescape(r[2]);

}

return null;

}

类型二：

提前定义的iframe页面

为了实现子页面在获取数据后更新，需要将更新子页面的代码包装成方法供父页面调用；虽然跳转链接已经固定，但我们可以在父页面元素的其他属性中临时保存数据。

父：页面定义

面板

父：取得数据时

const $editFrame = $("#editFrame");

$editFrame.attr("data-id", dataid);

$editFrame[0].contentWindow.refresh();

子

function refresh() {

const queryId = parent.$("#editFrame").attr("data-id");

console.log(queryId);

// ......

}