0

I'm using a a script https://www.jqueryscript.net/other/check-duplicate-browser-tab-window.html to check the duplicate of windows/tab. It works really well, but I would like to be able to actually close the first window/tab when opening a duplicate (basically have only one instance of this window/tab at any time given). I tried changing the script without success, if anyone can help.

This is the script:

(function ($) {
    $.fn.DuplicateWindow = function () {
        var localStorageTimeout = (5) * 1000; // 15,000 milliseconds = 15 seconds.
        var localStorageResetInterval = (1/2) * 1000; // 10,000 milliseconds = 10 seconds.
        var localStorageTabKey = 'my-application-browser-tab';
        var sessionStorageGuidKey = 'browser-tab-guid';

        var ItemType = {
            Session: 1,
            Local: 2
        };

        function setCookie(name, value, days) {
            var expires = "";
            if (days) {
                var date = new Date();
                date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
                expires = "; expires=" + date.toUTCString();
            }
            document.cookie = name + "=" + (value || "") + expires + "; path=/";
        }
        function getCookie(name) {
            var nameEQ = name + "=";
            var ca = document.cookie.split(';');
            for (var i = 0; i < ca.length; i++) {
                var c = ca[i];
                while (c.charAt(0) == ' ') c = c.substring(1, c.length);
                if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
            }
            return null;
        }

        function GetItem(itemtype) {
            var val = "";
            switch (itemtype) {
                case ItemType.Session:
                    val = window.name;
                    break;
                case ItemType.Local:
                    val = decodeURIComponent(getCookie(localStorageTabKey));
                    if (val == undefined)
                        val = "";
                    break;
            }
            return val;
        }

        function SetItem(itemtype, val) {
            switch (itemtype) {
                case ItemType.Session:
                    window.name = val;
                    break;
                case ItemType.Local:
                    setCookie(localStorageTabKey, val);
                    break;
            }
        }

        function createGUID() {
            this.s4 = function () {
                return Math.floor((1 + Math.random()) * 0x10000)
                  .toString(16)
                  .substring(1);
            };
            return this.s4() + this.s4() + '-' + this.s4() + '-' + this.s4() + '-' + this.s4() + '-' + this.s4() + this.s4() + this.s4();
        }
      function TestIfDuplicate() {
            //console.log("In testTab");
            var sessionGuid = GetItem(ItemType.Session) || createGUID();
            SetItem(ItemType.Session, sessionGuid);
            var val = GetItem(ItemType.Local);
            var tabObj = (val == "" ? null : JSON.parse(val)) || null;
            console.log(val);
            console.log(sessionGuid);
            console.log(tabObj);

            // If no or stale tab object, our session is the winner.  If the guid matches, ours is still the winner
            if (tabObj === null || (tabObj.timestamp < (new Date().getTime() - localStorageTimeout)) || tabObj.guid === sessionGuid) {
                function setTabObj() {
                    //console.log("In setTabObj");
                    var newTabObj = {
                        guid: sessionGuid,
                        timestamp: new Date().getTime()

                    };
                    SetItem(ItemType.Local, JSON.stringify(newTabObj));
                }
                setTabObj();
                setInterval(setTabObj, localStorageResetInterval);//every x interval refresh timestamp in cookie
                return false;
            } else {
                // An active tab is already open that does not match our session guid.
                return true;
            }
        }

        window.IsDuplicate = function () {
            var duplicate = TestIfDuplicate();
            console.log("Is Duplicate: "+ duplicate);
            return duplicate;

        };

        $(window).on("beforeunload", function () {
            if (TestIfDuplicate() == false) {
                SetItem(ItemType.Local, "");
            }
        })
    }
    $(window).DuplicateWindow();
}(jQuery));

This is how you call it in your code:

  $(document).ready(function () {

  if (window.IsDuplicate()) {

    // alert user the tab is duplicate
    alert("Window Already Opened in Another Tab\nPlease Click Ok");

    // close the current tab
    window.close();

  }

});

window.close() closes the new tab created. I want to close the previous one if I open the tab with a "Open link in a new tab", "Open link in a new window", or just copy and paste the URL in a new window. Thank you!

Yohav Rn
  • 159
  • 1
  • 11
  • This looks relevant, maybe you can find some ideas here: https://stackoverflow.com/questions/28230845/communication-between-tabs-or-windows – David784 Jul 06 '21 at 21:40
  • What browsers and devices? – react_or_angluar Jul 06 '21 at 21:58
  • 1
    Chrome/Firefox/Safari web and mobile for production (if it's not possible we will just open a modal to ask the users to close the other tabs). The best exemple is web.whatsapp that disable the other tabs when you open a new one and propose you to go with the current one for exemple. – Yohav Rn Jul 06 '21 at 22:04
  • Doesn't seem like a feature that any browser provider would encourage, make easy to do, or possible at all. You can't even change focus to the other duplicate tab due to security reasons. https://stackoverflow.com/questions/2704206/how-to-change-browser-focus-from-one-tab-to-another – react_or_angluar Jul 06 '21 at 22:10

0 Answers0