window.open父子页面,子页面关闭回调事件样例

 

   工作中经常遇到打开子页面的需求,用到window.open(),open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。详细语法看一下https://www.runoob.com/jsref/met-win-open.html  网站了解一下即可，下面说一下子页面关闭父页面接收关闭事件的两种常用法法。

1、父页面轮询监听子页面关闭事件

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

优势：子页面不需要多余操作,完全由父页面进行控制,缺点有延迟,不能接收到子页面的回传参数

var windowsOpen={};//定义全局变量

function windowOpen() {
    var url="https://www.runoob.com/jsref/met-win-open.html";
    var l = (screen.availWidth - 375) / 2;
    var t = (screen.availHeight - 667) / 2;
    windowsOpen=window.open(result.data + radioSelect[0].id, '子窗口页面', 'height=667, width=375, top=' + t + ', left=' + l + ', toolbar=no, ' +
        'menubar=no, scrollbars=no, resizable=no,location=no, status=no');
}

var loop = setInterval(function() {//监听子页面关闭事件,轮询时间1000毫秒
    if(windowsOpen.closed) {
        clearInterval(loop);
        alert('子页面已关闭');
    }
}, 1000);

2、子页面关闭后调用调用父页面,参数传递

父页面JS：

 

 

function windowOpenByContactBySend() {
    window.open("https://www.runoob.com/jsref/prop-win-opener.html");

}

function showAddMatchSchedule(id) {
    console.info("子窗口关闭。。。。。。。。。,返回的id为:"+id);

}

子页面JS,带参数回调：

$("#up_buOnclick").click(function () {

    var companyContact = $('#createForm').serializeJSON();
    if (companyContact.name === null || companyContact.name == '') {
        msgBox.alert("请输入名称！");
        return;
    }
    if (companyContact.手机号 === null || companyContact.手机号 == '') {
        msgBox.alert("请输入手机号！");
        return;
    }

    $.ajax({
        type: 'POST',
        url: CUR_PATH + "/companyContact/saveCompanyContact",
        data: companyContact,
        success: function (data) {
            if (data.error) {
                msgBox.alert(data.msg);
            } else {
                msgBox.alert('保存成功,点击确定关闭当前页面', window.close);
            }
        },
        error: function (res) {
            msgBox.alert('error')
        }
    });
    if (window.opener != null && !window.opener.closed) {
        console.info("-----------------");
        window.opener.showAddMatchSchedule(1234567890);//父页面的方法
    }
});