Question

以前，我有一个JavaScript代码，会弹出一个对话框＆amp;用户关闭浏览器时执行重定向。

<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script>
    $(document).ready(function() {
        var url     = 'http://www.yahoo.com';
        var message = 'go to yahoo?';

        $('a').on('click', function() { $(window).unbind("beforeunload"); });
        $('form').on('submit', function() { $(window).unbind("beforeunload"); });

        $(window).on("beforeunload", function() {
            $(window).unbind("beforeunload");
            setTimeout(function() {
                window.location = url;
            }, 0);

            return message;
        });
    });
</script>
</head>
<body>
hello world
</body>
</html>

我在chrome中进行了测试，它按预期工作。

现在，我打算出于某种原因使用zepto.js而不是jquery.js。

通过更改

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

到

<script src="zepto.min.js"></script>

我意识到代码不再有效。没有JavaScript错误。但是，beforeunload的事件功能从未触发过。

我怀疑$(window).on在 jquery 和 zepto

之间的行为有所不同

我可以知道，我如何让$(window).on("beforeunload", function() {适用于 zepto ？

Answer 1

我现在还没有时间对zepto和jquery代码进行深入分析。

问题是zepto处理事件回调的返回值的方式。

mdn: beforeunload说它必须以这种方式使用：

e.returnValue = confirmationMessage;     // Gecko and Trident   
return confirmationMessage;              // Gecko and WebKit

这是由jQuery自动完成的，但不是由Zepto完成的。

手动设置returnValue似乎在Chromium和Firefox中正常工作：

$(window).on("beforeunload", function(e) {
    e.returnValue = message;
    return message;
});

但仍有可能存在跨浏览器问题。因此，要么使用原生addEventListener而不是zepto，要么需要进行跨浏览器测试。

$（window）.on从jquery迁移到zepto时没有按预期工作

1 个答案: