layui子页面调用父页面的方法

工作时使用 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对象。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值