Internet Explorer 上的 Javascript onbeforeunload 问题

Question

这是我的脚本:

<script type="text/javascript">
    var redirectFlag = false;
    if (+localStorage.tabCount > 0) {
        alert('Already a tab or window opened!');
        redirectFlag = true;
    } else {
        redirectFlag = false;
        localStorage.tabCount = 0;
    }
    localStorage.tabCount = +localStorage.tabCount + 1;
    window.onbeforeunload = function () {
        localStorage.tabCount = +localStorage.tabCount - 1;
    };
    if (redirectFlag) {
        var baseUrl = window.location.origin;
        window.location.href = baseUrl + 'mylocation';
    }
</script>

我想检查是否打开了另一个选项卡。该脚本适用于 Firefox 和 Chrome。但在 IE 11 上，window.onbeforeunload 会被忽略。

是否有解决方法可以为 IE 执行此操作？谢谢

Answer 1

beforeunload 事件存在几个已知问题。以下是其中一些:

Attaching an event handler/listener to window or document's beforeunload event prevents browsers from using in-memory page navigation caches, like Firefox's Back-Forward cache or WebKit's Page Cache.

To combat unwanted pop-ups, browsers may not display prompts created in beforeunload event handlers unless the page has been interacted with, or may even not display them at all.

Ref: https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload

建议使用pageHide event相反，如果目标浏览器支持它。您可以在这里找到有关其支持的信息:https://caniuse.com/#search=pagehide

因此，您应该使用 onpagehide，而不是减少 onbeforeunload 事件处理程序中的 localStorage.tabCount:

window.onpagehide = function () {
  localStorage.tabCount = +localStorage.tabCount - 1;
};

您可以尝试以下代码笔，看看它是否适合您: https://codepen.io/Nisargshah02/pen/eMXMGE?editors=1011

<小时/>

我不太确定您的方法 - 即在 localStorage 中维护计数是否理想。过去我使用过一个库 Crosstab就达到了这个目的，并且被证明是可靠的。

<小时/>

注意:通过类似属性的访问器 localStorage.tabCount 访问 localStorge 项是一种不好的做法。您可能遇到的常见问题之一是有人重写了系统方法，例如 getItem 或 setItem。