之前的方案一,请参照: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之类的对话框也是有效的。