Problème Javascript avec une alerte de confirmation de lien externe global

Question

Ci-dessous, le code d’un plugin pour Joomla. Il fonctionne seul et son but est de détecter les liens externes sur la page et de les forcer dans de nouvelles fenêtres de navigateur à l'aide de _blank.

J'ai essayé pendant environ une heure (je ne connais pas bien le javascript), mais je n'arrive pas à comprendre comment faire fonctionner une fonction onclick.

Résultat final, je souhaite ajouter à ce script la possibilité d'une boîte de dialogue de confirmation, illustrée dans la deuxième section du code.

Un lien externe, lorsque vous cliquez dessus, fera apparaître la boîte de dialogue de confirmation. Si la réponse est oui, ils pourront accéder à l'URL externe, en l'ouvrant dans une nouvelle fenêtre. Sinon, cela annule et ne fait rien.

Lorsque je crée un lien avec

onclick="return ExitNotice(this.href);"

, le lien fonctionne parfaitement, mais comme plusieurs sites soumettent des entrées sur mon site Web, j'aimerais que la boîte de confirmation soit globale.

this.blankwin = function(){
  var hostname = window.location.hostname;
  hostname = hostname.replace("www.","").toLowerCase();
  var a = document.getElementsByTagName("a");   
  this.check = function(obj){
    var href = obj.href.toLowerCase();
    return (href.indexOf("http://")!=-1 && href.indexOf(hostname)==-1) ? true : false;              
  };
  this.set = function(obj){
    obj.target = "_blank";
    obj.className = "blank";
  };    
  for (var i=0;i<a.length;i++){
    if(check(a[i])) set(a[i]);
  };        
};

this.addEvent = function(obj,type,fn){
  if(obj.attachEvent){
    obj['e'+type+fn] = fn;
    obj[type+fn] = function(){obj['e'+type+fn](window.event );}
    obj.attachEvent('on'+type, obj[type+fn]);
  } else {
    obj.addEventListener(type,fn,false);
  };
};
addEvent(window,"load",blankwin);

Deuxième partie

/* ----------
  OnClick External Link Notice
---------- */
function ExitNotice(link,site,ltext) {
  if(confirm("-----------------------------------------------------------------------\n\n" + 
    "You're leaving the HelpingTeens.org website. HelpingTeens.org\ndoes not " + 
    "control this site and its privacy policies may differ\nfrom our own. " + 
    "Thank you for using our site.\n\nYou will now access the following link:\n"  + 
    "\n" + link + "\n\nPress \'OK\' to proceed, or  press \'Cancel\' to remain here." + 
    "\n\n-----------------------------------------------------------------------")) 
  {
  return true;
} 
history.go(0);
return false;
}

A) Quelqu'un peut-il m'aider à résoudre ce problème? ou B) Y a-t-il une meilleure solution?

Answer 1

Alors, je vais résumer ce que je pense que vous demandez, puis je vais vous dire comment je pense que cela peut être résolu. Il est possible que j'ai mal compris votre question.

Vous avez un code qui parcourt toutes les balises et définit leur attribut cible sur " _blank " et définit leur nom de classe sur & "; vide &"; et vous souhaitez plutôt réécrire les liens pour utiliser JavaScript afin d'afficher une boîte de dialogue de confirmation et accéder à l'emplacement uniquement si l'utilisateur clique sur Oui.

Dans ce cas, je pense que vous souhaitez que les liens se terminent comme s'ils étaient écrits comme suit:

<a href="javascript:void(0)" onclick="if (ExitNotice('http://www.whatever.com')) window.location.assign('http://www.whatever.com')">

Le javascript: void (0) empêche le navigateur de gérer le clic normalement, afin de ne pas accéder à une autre page, afin que votre onclick ait le temps de s'exécuter.

Pour que cela se produise, vous voudrez changer la définition de this.set (dans this.blankwin) en quelque chose comme ceci:

  this.set = function(obj){
    var href = obj.href;
    obj.href = "javascript:void(0)";
    obj.onclick = function() { (if ExitNotice(href) window.location.assign(href); };
    obj.target = "_blank";
    obj.className = "blank";
  };

Voir ici pour plus d'informations sur void (0).

Notez également que le code qui définit obj.className sur & "vide &"; Ce n'est pas génial, car cela supprimera tout autre className déjà attribué au lien. Vous pouvez simplement ajouter le nom de la classe aux classes existantes, comme suit:

obj.className = obj.className + " blank";

Answer 2

Tout fonctionne comme je le veux maintenant. Merci de votre aide. Comme c'est la première fois que j'utilise SO, j'espère vous avoir crédité correctement. Comme je ne sais pas comment (ou même si c'est possible) pour afficher le code dans les zones de commentaire, je choisis de répondre à ma propre question avec le code final pour que les autres en bénéficient.

Une fois encore, vous m'avez montré la syntaxe à modifier pour qu'elle fonctionne comme je le souhaitais.

MERCI!

Code final

    this.set = function(obj){
            var href = obj.href;
            //obj.href = "javascript:void(0)";
            obj.onclick = function() { return ExitNotice(href)};
            obj.target = "_blank";
            obj.className = obj.className + " blank";
    };

Answer 3

J'ai affiné le code un peu plus. Veuillez envisager de remplacer le fichier mfblank.js par le contenu suivant. Alors maintenant, tout le script est dans un seul fichier ET un rel = nofollow supplémentaire est ajouté. Amusez-vous avec ce script ...

this.blankwin = function(){
  var hostname = window.location.hostname;
  hostname = hostname.replace("www.","").toLowerCase();
  var a = document.getElementsByTagName("a");   
  this.check = function(obj){
    var href = obj.href.toLowerCase();
    return (href.indexOf("http://")!=-1 && href.indexOf(hostname)==-1) ? true : false;              
  };  
  this.set = function(obj){
            var href = obj.href;
            obj.onclick = function(){ if(confirm("Do you wanne leave this page?")) {
              return true;
            } 
              history.go(0);
              return false;
            };
            obj.target = "_blank";
            obj.className = obj.className + " blank";
            obj.rel = "nofollow";
    };
    for (var i=0;i<a.length;i++){
        if(check(a[i])) set(a[i]);
    };      
  }; 
  this.addEvent = function(obj,type,fn){
        if(obj.attachEvent){
            obj['e'+type+fn] = fn;
            obj[type+fn] = function(){obj['e'+type+fn](window.event );}
            obj.attachEvent('on'+type, obj[type+fn]);
        } else {
            obj.addEventListener(type,fn,false);
        };
    };
    addEvent(window,"load",blankwin);