Liens externes dans une nouvelle fenêtre

Voici une méthode très simple pour que les liens externes se trouvant sur les pages de votre forum s'ouvrent dans une nouvelle fenêtre (ou onglet en fonction du navigateur).

La seule façon de faire cela en restant valide XHML strict est d'utiliser du javascript. La plupart des méthode existantes passent par une modification de la source des liens. Cela implique que le code javascript est ajouté à chaque lien par le serveur, alourdissant d'autant la page, et qu'il faut modifier toutes les source de liens possible pour que la solution soit complète.

Cette méthode à l'inverse ne va impliquer que l'ajout d'une fonction javascript qui déléguera au navigateurs le soins d'ajouter le code nécessaire à l'ouverture de tous les liens externes dans une nouvelle fenêtre.

Simple et efficace, la méthode peut facilement être utilisée pour n'importe quelle page web.

Ouvrir :

Code: Tout sélectionner

style/prosilver/template/forum_fn.js

Ajouter en fin de fichier :

Code: Tout sélectionner

// www.phpBB-SEO.com SEO TOOLKIT BEGIN
// Open external links in new window in a XHTML 1.x compliant way.
function nw_external() {
   var current_domain = document.domain;
   if (!current_domain || !document.getElementsByTagName) return;
   var hrefels = new Array;
   var hrefelslen = 0;
   var hrefinner = '';
   hrefels = document.getElementsByTagName("a");
   hrefelslen = hrefels.length;
   for (var i = 0; i < hrefelslen; i++) {
      hrefinner = hrefels[i].innerHTML.toLowerCase();
      if ( (hrefels[i].href == '') || (hrefels[i].href.indexOf('javascript') >=0 ) || (hrefinner.indexOf('<a') >= 0) || (hrefels[i].href.indexOf(current_domain) >= 0) || hrefels[i].onclick != null) {
         continue;
      }
      hrefels[i].onclick = function () { window.open(this.href); return false; };
   }
}
onload_functions.push('nw_external()');
// www.phpBB-SEO.com SEO TOOLKIT END

Pour subsilver2, dans :

Code: Tout sélectionner

style/subsilver2/template/overall_header.html

ajoutez :

Code: Tout sélectionner

<script language="Javascript" type="text/javascript">
// <![CDATA[
// www.phpBB-SEO.com SEO TOOLKIT BEGIN
// Open external links in new window in a XHTML 1.x compliant way.
window.onload = function() {
   var current_domain = document.domain;
   if (!current_domain || !document.getElementsByTagName) return;
   var hrefels = new Array;
   var hrefelslen = 0;
   var hrefinner = '';
   hrefels = document.getElementsByTagName("a");
   hrefelslen = hrefels.length;
   for (var i = 0; i < hrefelslen; i++) {
      hrefinner = hrefels[i].innerHTML.toLowerCase();
      if ( (hrefels[i].href == '') || (hrefels[i].href.indexOf('javascript') >=0 ) || (hrefinner.indexOf('<a') >= 0) || (hrefels[i].href.indexOf(current_domain) >= 0) || hrefels[i].onclick != null) {
         continue;
      }
      hrefels[i].onclick = function () { window.open(this.href); return false; };
   }
}
// www.phpBB-SEO.com SEO TOOLKIT END
// ]]>
</script>

avant :

Code: Tout sélectionner

</head>

Notez que la modif pour subsilver2 marchera pour toute page html, il faudra cependant peut être adapter si vous effectuez d'autres appels à window.onload.
Prosilver dispose quant à lui directement d'une méthode pour faire des appels multiples à window.onload.

Le support pour cette astuce se fait dans ce fil de discussion, à la suite de ce message.

Salut,

Testé sur prosilver.. ça fonctionne nickel...

Bonjour, je viens de mettre en place aussi, sur un thème de famille subsilver2, impeccable.

Merci.

Est-ce possible d'intégrer cette fonction avec un nofollow ?

Cela ne servirait à rien, vu que c'est fait en javascript, les moteurs de recherche ne voient pas la modification effectuée.

Il y a le mod prime link pour les nofollow sur phpBB3.

Ok merci ! le mod prime link est dispo sur le site ?

Prime link : http://www.phpbb.com/community/viewtopi ... 0&t=581660

Merci beaucoup, il va falloir maintenant que je lise ....

Excellent, voila une modif bien utile !

Suite à l'ajout de ce code, les liens s'ouvrent toujours dans la meme fenetre ? Pas d'erreur, c'est comme si je n'avais rien ajouté.

Rem : j'utilise la Premod SEO 3.0.2, et l'interface Prosilver.

Si je regarde le source d'un Post avec un lien j'ai

Code: Tout sélectionner

<a class="postlink" href="http://www.ville-arnieressuriton.com/liens/liens.html">http://www.ville-arnieressuriton.com/liens/liens.html</a>

Merci de votre aide.

C'est normal, le code fait que seul les liens externes (vers un autre domaine que le tiens) s'ouvrent dans une nouvelle fenêtre.

Si tu veux ouvrir tous les liens dans un nouvelle fenêtre, remplaces :

Code: Tout sélectionner

      if ( (hrefels[i].href == '') || (hrefinner.indexOf('<a') >= 0) || (hrefels[i].href.indexOf(current_domain) >= 0) ) {

Par :

Code: Tout sélectionner

      if ( (hrefels[i].href == '') || (hrefinner.indexOf('<a') >= 0) ) {

Un seul mot : Nickel

@+

Salut,

j'ai mis en place cette astuce sur mon forum mais le problème est que ceci bloque le mod réponse rapide ( j'ai installé celui la : http://forums.phpbb-fr.com/base-de-donn ... 44550.html )

quelqu'un aurait une solution ?

Merci par avance.

ps : sa marche très bien sous IE mais firefox ouvre un nouvel onglet tout blanc

Mmm, tu pourrais poster le code html du lien qui foire ?

salut,

la fenetre de réponse rapide apaprait via une fonction javascript mais le probleme c'est que sa ne marche plus depuis que j'ai ajouté le code du 1er post dans le overall header de subsilver 2 :

Code: Tout sélectionner

<script type="text/javascript">
<!--
/**
* Toggle the visibility of the qr box
*/
function toggle_quick_reply()
{
   if (document.getElementById('quick_reply'))
   {
      if (document.getElementById('quick_reply').style.display == 'none')
      {
         document.getElementById('quick_reply').style.display = 'block';
      }
      else
      {
         document.getElementById('quick_reply').style.display = 'none';
      }
   }
}

/**
* Resize a textbox
* Original function by Disturbed One (http://www.hvmdesign.com/)
*/
function textbox_resize(pix)
{
   var box         = document.getElementById('message');
   var new_height   = (parseInt(box.style.height) ? parseInt(box.style.height) : 300) + pix;

   if (new_height > 0)
   {
      box.style.height = new_height + 'px';
   }

   return false;
}

if (1)
{
   if (document.addEventListener)
   {
      document.addEventListener('DOMContentLoaded', toggle_quick_reply, false);
   }
   else
   {
      window.onload = function()
      {
         toggle_quick_reply();
      }
   }
}
//-->
</script>

<div id="quick_reply">
   <form action="./posting.php?sid=829d72e1d8aaf2d7015fb8ee66ea2e43" method="post">

      <table class="tablebg" width="100%" cellspacing="1">
      <tr>
         <th colspan="2">Réponse rapide</th>
      </tr>
            <tr>
         <td class="row2" align="center" valign="middle" colspan="2"><textarea name="message" id="message" rows="15" cols="76" tabindex="2" style="width: 70%; height: 250px;"></textarea></td>
      </tr>
            <tr>

         <td class="row2" colspan="2">
            <input type="button" value=" + " class="btnlite" onclick="textbox_resize(100);" />
            <input type="button" value=" - " class="btnlite" onclick="textbox_resize(-100);" />
         </td>
      </tr>
            <tr>
         <td class="cat" align="center" colspan="2">
            <input type="hidden" name="t" value="50621" />
<input type="hidden" name="f" value="118" />

<input type="hidden" name="mode" value="reply" />
<input type="hidden" name="lastclick" value="1231594686" />
<input type="hidden" name="icon" value="0" />
<input type="hidden" name="attach_sig" value="1" />
<input type="hidden" name="subject" value="Re: dgcc rf" />
            <input type="submit" name="preview" tabindex="6" value="Aperçu" class="btnlite" />&nbsp;&nbsp;
            <input type="submit" name="post" tabindex="5" value="Envoyer" class="btnmain" accesskey="s" />
         </td>
      </tr>
      </table>
   <input type="hidden" name="creation_time" value="1231594686" />

<input type="hidden" name="form_token" value="ce3a0aae301e031f5bd2e6b6e0d89fff8c2c33d2" />
   </form>
</div>


j'ai bien vu ceci

Notez que la modif pour subsilver2 marchera pour toute page html, il faudra cependant peut être adapter si vous effectuez d'autres appels à window.onload.

mais je ne sais pas comment faire.