CODEWITHSUNDEEP
javascriptinternet-explorertabsonbeforeunload
Attila Naghi
Attila Naghi

Reputation: 2686

Javascript onbeforeunload issue on internet explorer

This is my script:

<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>

I want to check if another tab is opened or not. This script works on firefox and chrome. But on IE 11 the window.onbeforeunload is ignored.

Is there a workaround to do this for IE as well ? Thank you

Upvotes: 0

Views: 2604

Answers (2)

Attila Naghi
Attila Naghi

Reputation: 2686

This way it works for IE11 and latest firefox ,chrome. Didn't check for opera,edge, safari or netscape. 

<script type="text/javascript">
    //only when an order is created
    var redirectFlag = false;
    if (+localStorage.tabCount > 0) {
        alert('Already a tab or window opened!');
        redirectFlag = true;
    } else {
        localStorage.tabCount = 0;
    }
    localStorage.tabCount = +localStorage.tabCount + 1;
    //works for firefox;chrome;ie11
    window.addEventListener('onpagehide', function (evt) {
        localStorage.tabCount = +localStorage.tabCount - 1;
    });
    //redirect user if there are 2 tabs/windows opened
    if (redirectFlag) {
        var baseUrl = window.location.origin;
        window.location.href = baseUrl + 'myurl';
    }
</script>

Upvotes: 0

Nisarg Shah
Nisarg Shah

Reputation: 14561

There are several known issues with beforeunload event. Here are some of them:

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

It is recommended to use pageHide event instead, if target browser supports it. You can find about its support here: https://caniuse.com/#search=pagehide

So instead of reducing the localStorage.tabCount in onbeforeunload event handler, you should use onpagehide:

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

You can try the following code pen to see if it works for you: https://codepen.io/Nisargshah02/pen/eMXMGE?editors=1011

I am not fully sure regarding your approach - i.e. if maintaining the count in localStorage is ideal. In past I have used a library Crosstab for the purpose, and it has proved to be reliable.

Note: It is a bad practice to access localStorge items through property-like accessor localStorage.tabCount. One of the common issues you can run into would be someone overriding system methods such as getItem or setItem.

Upvotes: 2

Related Questions