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

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();
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是一个示例代码,可以在页面关闭时暂停视频播放,并将播放进度保存到数据库中: ```html <!DOCTYPE html> <html> <head> <title>关闭视频播放器并保存进度示例</title> </head> <body> <video id="my-video" src="example.mp4" controls autoplay></video> <script> // 获取视频播放器元素 var videoPlayer = document.getElementById('my-video'); // 监听beforeunload事件 window.addEventListener('beforeunload', function() { // 暂停视频播放 videoPlayer.pause(); // 获取当前播放时间 var currentTime = videoPlayer.currentTime; // 保存当前播放进度到数据库 saveProgress(currentTime); }); // 模拟保存进度到数据库的函数 function saveProgress(progress) { // 发送Ajax请求,将进度保存到数据库中 // 这里只是一个示例,实际情况需要根据具体需求进行修改 var xhr = new XMLHttpRequest(); xhr.open('POST', '/api/save-progress'); xhr.setRequestHeader('Content-Type', 'application/json'); xhr.send(JSON.stringify({ progress: progress })); } </script> </body> </html> ``` 在上述示例中,我们监听了beforeunload事件,并在事件回调中暂停了视频播放,并且将当前播放进度保存到了数据库中。具体实现如下: 1. 获取视频播放器元素,以便在事件回调中操作播放器。 2. 监听beforeunload事件,并在事件回调中暂停播放器、获取当前播放时间、保存当前播放进度到数据库中。 3. 为了演示保存进度到数据库的过程,我们使用了一个模拟函数`saveProgress()`来模拟实际情况下的保存操作。在实际项目中,需要根据具体情况进行修改。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值