HTML父页面监听子页面关闭并回调方法

最新推荐文章于 2023-11-02 14:31:12 发布

故事讲到哪了

最新推荐文章于 2023-11-02 14:31:12 发布

阅读量2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/weixin_43297055/article/details/107366485

前端专栏收录该内容

2 篇文章

订阅专栏

本文介绍两种子窗口与父窗口通信的方法：一是父页面监听子窗口关闭；二是子页面直接调用父页面方法，如关闭子页后刷新父页数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.方式一：父页面监听

父页面中：

		//此处省略新窗口的设置参数
		var win = window.open("url", "name", "features");
        var loop = setInterval(function () {
            if (win.closed) {
                clearInterval(loop);
                //执行回调方法
       			//method(...);
        }, 800);//监听的固定时间间隔

子页面中：

	window.close();

2.方式二：子页面直接调用父页面方法

父页面中：（写子页面要调用的方法）
eg:子页面关闭刷新父页面数据

function doLoad(yhxm, yhbm) {
	//此处数据暂未二次编码
	var param = "yhbm=" + yhbm
        + "&yhxm=" + yhxm;
	//发送ajax请求重新加载页面
    $.ajax({
        url: "",
        type: "post",
        data: param,
        dataType: "json",
        success: function (rsp) {
        	//后台rsp.data中返回替换表格的html片段
            if (rsp.status == "success") {
                $("#tbody").html(rsp.data);
            } else {
                alert(rsp.message)
            }
        },
        error: function () {
            //错误处理
        }
    });
}

子页面中：

//其中yhxm,yhbm为子页面中取值完成并传递给父页面的参数
//doLoad()为父页面方法
window.opener.doLoad(yhxm, yhbm);
window.close();