论坛首页 Web前端技术论坛

模态对话框导致setTimeout无效的解决方案(二)

浏览 1747 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2014-04-03  

之前的方案一,请参照:http://rainbow702.iteye.com/admin/blogs/2040051

 

这篇写下方案二。

这个方案用到了HTML5中新的API,web worker。

web worker 能够产生一个独立于主线程的子线程,它们之间除了通信之外,是不会互相干扰的。而恰好,在web worker 也能够使用 setTimeout 来定时,所以,我就自然而然的想到了,把之前在主画面启动的定时器依赖web worker去做。下面就是这个方案的基本实现。

① 新建主画面,代码如下,其中,worker部分的代码是关键

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>模态对话框导致setTimeout无效的解决方案(二)</title>
<script>
    var worker = null;
    function start() {
        (event.target || event.srcElement)["disabled"] = true;
        
		// 使用web worker来进行定时
		if(!worker) {
			worker = new Worker("timer.js");
			worker.onmessage = function() {
				document.querySelector("#txt").innerText = Math.random();
				worker.postMessage(1000);
			};
		}
		worker.postMessage(1000);
    }
    
    function dlgOpenButton() {
        document.querySelector("#txt2").innerText = "模态画面打开中。。。";
        var val = window.showModalDialog("dialog.html",Math.random());
		
		// 对alert框也仍然有效
        // var val = window.alert("我是alert框");
        document.querySelector("#txt2").innerText = "模态画面关闭了,返回值为: " + val;
    }
</script>
</head>
<body>
    <button type="button" onclick="start()">启动定时器</button>
    <button type="button" onclick="dlgOpenButton()">打开模态对话框</button>
    <div>
        <p style="float: left;">定时更新内容:</p>
        <p id="txt" style="float: left;"></p>
    </div>
    <div style="float: left; clear: left;">
        <p style="float: left;">模态对话框状态:</p>
        <p id="txt2"></p>
    </div>
</body>
</html>

 ② 在①中通过 timer.js 来创建了一个worker,下面即为 timer.js  的代码:

this.onmessage = function(task){
	var interval = task.data;
	
	this.setTimeout(function(){
						// 只需要给主线程一个信号就可以了,不需要任何返回值
						this.postMessage("");
					}, interval);
};

 ③ 模态对话框的内容:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我是模态对话框</title>
<script>
    window.onload = function() {
        var para = window.dialogArguments;
        document.querySelector("#fromParent").innerText = para;
    };
    
    window.onunload = function() {
        window.returnValue = Math.random();  
    };
</script>
</head>
<body>
    <div>
        <p>我是模态对话框,父画面传给我的值是: </p>
        <p id="fromParent"></p>
    </div>
    <br/>
</body>
</html>

  

PS:上述方案,不仅对showModalDialog有效,对alert之类的对话框也是有效的。

  • 大小: 18.4 KB
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics