check if a browser tab is already open so I don't make extra tabs

Asked 16/11, 2012 at 22:34 Answered 9/4, 2014 at 14:27

When a user adds an item to our shopping cart it opens our store in a new tab. Different websites oddly enough.

I would like to check if the tab is already open and then repopulate it it with the second item instead of opening another tab with the updated cart.

Is there a way to check this with js? I imagine I can track that we opened the tab but I don't see how I can confirm that it wasn't closed in the time between adding items to the cart without doing some ajax requests pinging both pages etc. Which seems like overkill.

So simply how do you check if a browser tab is already open?

Edited with a solution: First:

var tab = window.open('http://google.com','MyTab');

Then:

if(tab) {
  var tab = window.open('http://yahoo.com','MyTab');
}

Rafferty answered 16/11, 2012 at 22:34 Comment(2)

I think all you have to do is name the window. – Pallaten 16/11, 2012 at 22:38

You can also just set focus on the tab if it's already opened

var win = window.open('http://google.com', 'tab');                     if (win) {                         win.focus();                 }

– Wordsmith 21/5, 2015 at 15:12

window.open has the following parameters: var tab = window.open(url, name, specs, replace) As long as you use the same name the url will be loaded into that window/tab.

If you wanted to keep the descriptor/reference (tab above), that window.open returns, once the user refreshes the page, that reference is lost.

Complaisant answered 16/11, 2012 at 22:46 Comment(3)

Ideally I could persist this beyond the page that the user is on as products are on different pages on the site. – Rafferty 16/11, 2012 at 23:16

@Rafferty If this answers your question, click the tick-mark on the left side to mark it as such. =) – Hubsher 16/11, 2012 at 23:16

It mostly answers it so I clicked it but I am still researching persisting beyond the page that opened the tab. I will experiment with the browsers storage but I am not sure whether it can store that variable – Rafferty 16/11, 2012 at 23:21

I think your best bet could be session storage / local storage, but it works only in newer browsers.

Spank answered 16/11, 2012 at 22:40 Comment(1)

I think you are right if I want to persist beyond the page the user is on. Thanks – Rafferty 16/11, 2012 at 23:16

All you need is to save a reference to the opened tab that you can relate with some id that will make sense to you... Then when you need to reopen it again just use the saved reference from there you can access your parent or opener window from window.opener. Also to know when the child window is closed there is a default browser event "beforeunload" that when called can remove the window from your reference object in your parent so you know that you have to reopen it not just focus it.

Unstuck answered 16/11, 2012 at 22:50 Comment(0)

I gone through each steps and I came up with some points. I tested it on IE. It did not worked as expected if you use URL like (htp://www.google.com) and it worked if you use your domain page.

While it worked well for Firefox and chrome.

Following example does not work:

<script type="text/javascript">
    function myfunction1() {
        window.open('http://www.google.com', 'f');
    }
    function myfunction2() {
        window.open('http://www.yahoo.com', 'f');
    }
</script>
<body>
    <form id="form2" runat="server">
    <div>
        <a href="#" onclick='myfunction1();'>myfunction1</a> 
        <a href="#" onclick='myfunction2();'>myfunction2</a>
    </div>
    </form>
</body>
</html>

And Following example works:

<script type="text/javascript">
        function myfunction1() {
            window.open('WebForm1.aspx', 'f');
        }
        function myfunction2() {
            window.open('WebForm2.aspx', 'f');
        }
</script>
<body>
    <form id="form1" runat="server">
    <div>
        <a href="#" onclick='myfunction1();'>myfunction1</a>
        <a href="#" onclick='myfunction2();'>myfunction2</a>
    </div>
    </form>
</body>
</html>

Sauterne answered 9/4, 2014 at 14:27 Comment(0)

Recommended topics

Hot tags