从对象的获取上看,通过父获取子需要在繁多的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);
// ......
}