模态对话框导致setTimeout无效的解决方案（二）
这篇写下方案二。
这个方案用到了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>④ 下面附上worker的工作过程
PS：
① 上述方案，不仅对showModalDialog有效，对alert之类的对话框也是有效的。
② 如果在woker中的任何地方(比如，在主画面的 onmessage 中)，弹出了alert的话，上述方案将会失效，因为worker也会被alert阻断的。
相关推荐
sfkong 2020-08-02
89500297 2020-05-05
delmarks 2020-04-09
gjcxywwx 2019-11-04
前端开发Kingcean 2019-10-22
Magicsoftware 2019-10-19
xuewenke 2012-02-05
jiangbo0 2019-09-08
85403263 2019-07-01
codable 2019-07-01
梦秋雨 2019-07-01
87241940 2019-06-30
83251242 2019-06-30
85281643 2019-06-29
whynotgonow 2019-06-29