为什么/Chrome 对待 onbeforeunload 的方式与其他浏览器不同？

发布于 2024-10-19 18:50:43 字数 866 浏览 5 评论 0原文

在 chrome 和 firefox/IE 中尝试一下：

    var cancelPressed = false;
    function redirect()  {
        //window.location = "http://www.google.com";
        alert('hi!');
    }

    window.onbeforeunload = function() {
        window.pressedTimer = setInterval("cancelPressed = true; clearInterval(window.pressedTimer);",3000);
        window.onbeforeunload = function() {
            if (!cancelPressed) {
                window.unloadTimer = setTimeout('redirect()',500);
                window.onbeforeunload = function() {clearTimeout(window.unloadTimer);};
                return "Redirecting..";
            } else {
                return 'wups';
            }
        };
        return 'first!';
    };

在 FF/IE 中，刷新，在第一个提示时点击“取消”，等待大约六秒钟，然后尝试刷新。 “wups”将被触发。但是，在 Chrome 中，您可以等待任意时间，并且 cancelPressed 永远不会设置为 true。

你怎么认为？

原文

Try this in chrome versus firefox/IE:

    var cancelPressed = false;
    function redirect()  {
        //window.location = "http://www.google.com";
        alert('hi!');
    }

    window.onbeforeunload = function() {
        window.pressedTimer = setInterval("cancelPressed = true; clearInterval(window.pressedTimer);",3000);
        window.onbeforeunload = function() {
            if (!cancelPressed) {
                window.unloadTimer = setTimeout('redirect()',500);
                window.onbeforeunload = function() {clearTimeout(window.unloadTimer);};
                return "Redirecting..";
            } else {
                return 'wups';
            }
        };
        return 'first!';
    };

In FF/IE, refresh, hit cancel on the first prompt, wait about six seconds, and then try to refresh. The 'wups' will be triggered. However, in Chrome, you can wait as long as you want and cancelPressed will never be set to true.

What do you think?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

琉璃繁缕 2024-10-26 18:50:43

您使用的是哪个版本的 Chrome？如果我等待足够长的时间，我还会在 Chrome 中收到 'wups' 消息。然而，我注意到 Webkit 浏览器和其他浏览器之间存在细微的差别。考虑以下代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Javascript test</title>
        <script type="text/javascript" language="javascript">
            window.onload = function() {
                document.getElementById("test").onclick = function() {
                    var startdate;

                    var interval = window.setInterval(function() {
                        // Get the difference (in milliseconds) between the current 
                        // date and the startdate.  
                        var diff = (new Date()).getTime() - startdate.getTime();
                        alert(diff);

                        window.clearInterval(interval);
                    }, 5000);

                    alert("Hello!");
                    startdate = new Date();
                };
            };
        </script>
    </head>
    <body>
        <button id="test">Test button</button>
    </body>
</html>

在 chrome 和 safari 中，第二个警报将始终显示略大于 5000 的数字，而在其他浏览器中，您会得到 0 到 5000 之间的数字。

那么发生了什么？使用 setInterval()，浏览器创建一个计时器，该计时器将在每个给定的时间间隔调用 JavaScript 方法。 JavaScript 是单线程的，警告框会完全阻止 JavaScript 的执行。在 chrome 和 safari 中，这意味着计时器也会暂停，而在其他浏览器中计时器会继续，但 javascript 方法调用会被抑制，直到警告框关闭。

这和你的例子有什么关系？这意味着在 chrome 和 webkit 中，您始终必须等待至少 3000 毫秒才能设置 cancelPressed，而在其他浏览器中，这将在 0 到 3000 毫秒之间发生。

Which version of Chrome are you using? If I wait long enough, I also get the 'wups' message in Chrome. However, I noticed a subtle difference between Webkit browsers and other browsers. Consider the following code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Javascript test</title>
        <script type="text/javascript" language="javascript">
            window.onload = function() {
                document.getElementById("test").onclick = function() {
                    var startdate;

                    var interval = window.setInterval(function() {
                        // Get the difference (in milliseconds) between the current 
                        // date and the startdate.  
                        var diff = (new Date()).getTime() - startdate.getTime();
                        alert(diff);

                        window.clearInterval(interval);
                    }, 5000);

                    alert("Hello!");
                    startdate = new Date();
                };
            };
        </script>
    </head>
    <body>
        <button id="test">Test button</button>
    </body>
</html>

In chrome and safari, the second alert will always display a number slightly greater than 5000, while in other browsers, you get a number between 0 and 5000.

So what is happening? With setInterval(), the browser creates a timer that will invoke a javascript method every given interval. Javascript is single threaded, and an alert box will completely block the javascript execution. In chrome and safari, this means that the timer is also paused, while in other browsers the timer continues, but the javascript method invocation is suppressed until the alert box is closed.

What has this to do with your example? It means that in chrome and webkit you always have to wait at least 3000 milliseconds before cancelPressed is set, while in others browser, this will happen somewhere between 0 and 3000 milliseconds.

回复收藏 0 原文

~没有更多了~