Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to know if browser tab is already open using Javascript?

How to know or check if the two browser tab is already open and if those tab are open, the user will receive an alert box or msg box saying that 'the url is already open', something like that, in pure/native JavaScript? This browser tab is contain an external website which is I don't have any privileges to manipulate or change it. Thanks

Example URLs

yahoo.com and google.com

I want to alert the user if there's already open tab for yahoo.com and google.com

And I want to use tabCreate to open the url like this:

tabCreate("http://maps.google.com/", "tabMapsPermanentAddress");
mean to open a new tab, it is use in creating chrome extension
like image 838
User014019 Avatar asked Sep 04 '14 09:09

User014019


People also ask

How do you check if a tab is already open in JavaScript?

One basic idea is to store the tab count in either a cookie or localStorage , incrementing it on page load and decrementing it on page unload: if (+localStorage. tabCount > 0) alert('Already open!

How can you tell if a website is active?

Visit Website Planet. Enter the URL of your website address on the field and press the Check button. Website Planet will show whether your website is online or not.


1 Answers

You may use something like following

<!-- HTML -->
<a id="opener">Open window</a>

// JavaScript
var a = document.getElementById('opener'), w;        
a.onclick = function() {
  if (!w || w.closed) {
    w = window.open("https://www.google.com","_blank","menubar = 0, scrollbars = 0");
  } else {
    console.log('window is already opened');
  }
  w.focus();
};

Working jsBin | More on window.open method

If you want to control more than one window, use the snippet below

<!-- HTML -->
<a href="https://www.google.com" class="opener">Open google.com</a> | 
<a href="http://www.yahoo.com" class="opener">Open yahoo.com</a> 

//JavaScript
window.onload = function(){
  var a = document.querySelectorAll('.opener'), w = [], url, random, i;
  for(i = 0; i < a.length; i++){
    (function(i){
      a[i].onclick = function(e) {
        if (!w[i] || w[i].closed) {
          url = this.href;
          random = Math.floor((Math.random() * 100) + 1); 
          w[i] = window.open(url, "_blank", random, "menubar = 0, scrollbars = 0");
        } else {
          console.log('window ' + url + ' is already opened');
        }
        e.preventDefault();
        w[i].focus();
      };
    })(i);
  }
};

Working jsBin

If you don't want them to load in separated window, just exclude this line

random = Math.floor((Math.random()*100)+1);

and remove random reference from the next line

w[i] = window.open(url, "_blank", random, "menubar=0,scrollbars=0");

Side note: As you can see above, we created two windows with some third party content; you should know that there's no way to get any reference (to the parent/opener window) from them.

like image 106
hex494D49 Avatar answered Sep 16 '22 17:09

hex494D49