工作时使用 layui 做弹窗,layui.open()打开子页面经过一些操作确认后需要调用父页面某个方法,具体实现方式如下:
父页面创建一个获取当前iframe层到top层的id集合,每个iframe层都有id。
//获取当前iframe页面id
function getIframeIds() {
var iframeIds = '';
var frameIndex = 0;
//当前window对象
var win = window;
var fId;
while (win.frameElement != null) {
fId = win.frameElement.id;
//我的顶层id为top
if (fId == 'top'){
break;
}
if (iframeIds == '') {
iframeIds += fId;
} else {
iframeIds += "," + fId;
}
win = win.parent;
}
return iframeIds;
}
在父页面利用layui打开子页面,并传入通过上方法获取的当前父iframe的id。layer.open()打开子页面
layer.open({
type: 2,
title: '子页面',
content: 'child.html?&iframeIds='+getIframeIds(),
maxmin: true,
area: ['850px', '450px'],
btn: ['确定', '取消'],
yes: function(index, layero) {
//点击确认触发 iframe 内容中的按钮提交
var submit = layero.find('iframe').contents().find("#layuiadmin-app-form-submit");
submit.click();
}
});
//要执行的父页面方法
function getTask(){
console.log("调用了父方法!")
}
子页面获取传过来的iframeIds参数值,通过此id获取父页面的window对象,并执行父页面的方法。
var iframeIds = getUrlData(window.location.href).iframeIds;
var win = window.top;
win = win.document.getElementById(iframeIds).contentWindow;
win.getTask();//执行父页面的方法
//获取参数
function getUrlData(url){
var urldata = url.split('?')[1].split('&');
var result = [];
var c = [];
for(var i = 0; i < urldata.length; i++) {
var index = urldata[i].indexOf("=");
var start = urldata[i].substring(0, index);
var end = urldata[i].substring(index + 1, urldata[i].length);
c += result.concat('"' + start + '":"' + end + '",')
};
var aaa = '{' + c.substring(0, c.lastIndexOf(',')) + '}';
var obj = JSON.parse(aaa);
return obj;
}
getUrlData(url)用来获取父页面传过来的参数信息,将参数封装成的json对象。