父页面中关闭子页面计时器的解决方法

布满荆棘的人生 2024-03-26 22:01 45阅读 0赞

父页面弹出窗口以iframe的方式加载子页面的数据，当窗口关闭时，子页面的js计时器却还在运行，导致页面卡顿阻塞。下面是我在实际编程中使用的方法：

一、子页面中的计时器：

var timer1 =setInterval("refreshDataAll()", 800);

二、父页面中关闭子页面计时器的方法：

var ss = "crossingVedio_page.html?time=" + new Date().getTime();
    $('#crossingVedio_win').window({
        
    		title: '路口视频',
    		width: 1150,
    		height: 778,
    		closed: true,
    		cache: false,
    		maximizable: false,
    		minimizable: false,
    		collapsible: false,
    		resizable: false,
    		content: "<iframe id='cvp' scrolling='no' frameborder='0' src='" + ss + "' style='width:600px; height:300px; display:block;'></iframe>",
    		modal: true
    });
    $('#crossingVedio_win').window({
        
    	onBeforeClose:function(){
        
    	//三种方法：
    	//第一种：使用window最外层数据包，类似键值对一样，将子页面窗口在子页面中赋值，如：window["subwin:]=window;这样就将子页面赋值给了windows["subwin"],然后使用下列方法关闭计时器。
        //window["subwin:].clearInterval(window["subwin:]["timer1"]);
    
    	//jquery方法：
    	//var subwin=$("#cvp")[0].contentWindow;
    	//subwin.clearInterval(subwin["timer1"]);
    
    	//js方法：
    	var subwin=document.getElementById("cvp").contentWindow;//获取子页面窗口
    	subwin.clearInterval(subwin["timer1"]);//取到子页面窗口中的计时器执行subwin.clearInterval()方法
    	}
    }

首先要给iframe定义一个id，然后在窗口的onBeforeClose事件中关闭子页面的计时器。  
秋风写于淄博，业务联系与技术交流：Q375172665

发表评论取消回复

表情：

评论列表（有 0 条评论，45人围观）

还没有评论，来说两句吧...

相关阅读

相关父页面中关闭子页面计时器的解决方法

父页面弹出窗口以iframe的方式加载子页面的数据，当窗口关闭时，子页面的js计时器却还在运行，导致页面卡顿阻塞。下面是我在实际编程中使用的方法：一、子页面中的计时器：

布满荆棘的人生/ 2024年03月26日 22:01/ 0 赞/ 46 阅读

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

1、父页面使用定时器监听子页面关闭事件，执行指定时间 setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。setInterval() 方法会不

╰半夏微凉°/ 2022年12月25日 09:54/ 0 赞/ 544 阅读

相关 iframe——html子页面调用父页面的方法

$( function () \{ //在iframe子页面中查找父页面元素 alert($( '\default' , window.parent.document

心已赠人/ 2022年05月25日 00:36/ 0 赞/ 411 阅读

相关 html子页面获取父页面js方法

1.最近在写项目有很多可以拿出来分享 html子页面获取父页面js方法 //window.parent.后面跟着父类js中的方法， window.paren

拼搏现实的明天。/ 2022年05月23日 23:26/ 0 赞/ 368 阅读

相关 iframe 父页面调用子页面方法

<script type="text/javascript"> //调用子页面的方法. var childWi

￡神魔★判官ぃ/ 2022年03月14日 09:36/ 0 赞/ 1178 阅读

相关 mui 子页面返回父页面并执行父页面的方法

在子页面执行的方法 if (window.plus) { plusready(); } else { document.addEventL

古城微笑少年丶/ 2022年02月04日 00:55/ 0 赞/ 617 阅读

相关 vue 子页面调父页面方法

1.创建util.js import Vue from 'vue' export default new Vue() 2.父页面子页面分别引入 i

我会带着你远行/ 2021年09月30日 02:44/ 0 赞/ 649 阅读

相关 Js 父页面、子页面互相访问的方法

1、子页面访问父页面元素 parent.document.getElementById('id')和document相关的方法都可以这样用 2、父页面

太过爱你忘了你带给我的痛/ 2021年09月28日 00:30/ 0 赞/ 538 阅读

相关框架页面中，从子页面刷新父页面问题解决

上次做的一个项目的主页面是那种框架的效果，左边点什么右边的子页面对应各个页面。我开始要做的功能是当点击某个连接时，且ｓｅｓｓｉｏｎ超时的时候．右边就出来一个登陆错误页面

男娘i/ 2021年09月26日 02:46/ 0 赞/ 475 阅读

相关 layer open 子页面调用父页面的方法

> 问题情景：比如收货地址列表我要新增一个地址，使用layer的弹窗获取用户输入信息，在保存的时候调用父页面已经定义的获取收货地址列表的方法，以此来不刷新页面的同时，刷新列表，

淡淡的烟草味﹌/ 2021年09月24日 01:26/ 0 赞/ 1406 阅读