父页面监听子页面关闭方法:window.open

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);//父页面的方法
    }
});
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页