web-dev-qa-db-fra.com

Comment savoir si l'onglet du navigateur est déjà ouvert avec Javascript?

Comment savoir ou vérifier si l'onglet des deux navigateurs est déjà ouvert et si ceux-ci sont ouverts, l'utilisateur recevra un message d'alerte ou un message indiquant que "l'URL est déjà ouverte", quelque chose comme ça, en JavaScript pur/natif? Cet onglet de navigateur contient un site Web externe sur lequel je ne dispose d'aucun privilège pour le manipuler ou le modifier. Merci

Exemple d'URL

yahoo.com and google.com

Je souhaite alerter l'utilisateur s'il existe déjà un onglet ouvert pour yahoo.com et google.com

Et je veux utiliser tabCreate pour ouvrir l'URL comme ceci:

tabCreate("http://maps.google.com/", "tabMapsPermanentAddress");
mean to open a new tab, it is use in creating chrome extension
javascriptexternalbrowser-tabexternal-links
14
User014019

Vous pouvez utiliser quelque chose comme suivre

<!-- 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();
};

Travailler jsBin | Plus d'informations sur la méthode window.open

Si vous souhaitez contrôler plusieurs fenêtres, utilisez l'extrait de code ci-dessous.

<!-- 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);
  }
};

Travailler jsBin

Si vous ne voulez pas qu'ils soient chargés dans une fenêtre séparée, excluez simplement cette ligne

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

et supprimer la référence random de la ligne suivante

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

Note latérale: Comme vous pouvez le voir ci-dessus, nous avons créé deux fenêtres avec du contenu tiers; vous devriez savoir qu'il n'y a aucun moyen d'obtenir d'eux une référence (à la fenêtre parent/ouvre).

8
hex494D49

Une idée de base est de stocker le nombre d'onglets dans un cookie ou dans localStorage, en l'incrémentant au chargement de la page et en le décrémentant au déchargement de la page:

if (+localStorage.tabCount > 0)
    alert('Already open!');
else
    localStorage.tabCount = 0;

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

Essayez ouvrez ce violon dans plusieurs onglets.

Notez que cette technique est assez fragile, cependant. Par exemple, si, pour une raison quelconque, le navigateur se bloque, le gestionnaire de déchargement ne s'exécutera pas et il ne sera plus synchronisé.

6
Casey Chu

La réponse de Casey Chu fonctionne correctement jusqu'à ce que le navigateur se bloque avec la page ouverte. Lors de toute prochaine exécution, l’objet localStorage aura initialisé tabCount avec une valeur autre que zéro. Par conséquent, une meilleure solution consiste à stocker la valeur dans un cookie de session. Le cookie de session sera supprimé lorsque le navigateur se fermera correctement. Lorsque le navigateur se bloque, le cookie de session sera en réalité préservé, mais heureusement pour la prochaine exécution du navigateur.

L'objet sessionStorage est distinct pour chaque onglet, il ne peut donc pas être utilisé pour le nombre d'onglets de partage.

C'est la solution améliorée utilisant js-cookie library.

if (+Cookies.get('tabs') > 0)
    alert('Already open!');
else
    Cookies.set('tabs', 0);

Cookies.set('tabs', +Cookies.get('tabs') + 1);

window.onunload = function () {
        Cookies.set('tabs', +Cookies.get('tabs') - 1);
};
2
Grzegorz Żur

Cette réponse: https://stackoverflow.com/a/28230846 est une alternative qui n'exige pas la bibliothèque Cookies/js-cookie. Cela répondait mieux à mes besoins. En résumé (voir la réponse liée pour une description complète):

$(window).on('storage', message_receive);

...

// use local storage for messaging. Set message in local storage and clear it right away
// This is a safe way how to communicate with other tabs while not leaving any traces
//
function message_broadcast(message)
{
    localStorage.setItem('message',JSON.stringify(message));
    localStorage.removeItem('message');
}


// receive message
//
function message_receive(ev)
{
    if (ev.originalEvent.key!='message') return; // ignore other keys
    var message=JSON.parse(ev.originalEvent.newValue);
    if (!message) return; // ignore empty msg or msg reset

    // here you act on messages.
    // you can send objects like { 'command': 'doit', 'data': 'abcd' }
    if (message.command == 'doit') alert(message.data);

    // etc.
}
0
Paul Higgins