Comment ouvrir les liens externes dans un nouvel onglet sur Webflow ?

Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment ouvrir automatiquement tous les liens externes dans un nouvel onglet sur votre site Webflow.

Exemple

Le script

Ce script détecte automatiquement tous les liens qui pointent vers un domaine différent du vôtre et leur ajoute target="_blank" et rel="noopener noreferrer".

document.querySelectorAll('a[href]').forEach(function(link) {
  if (link.hostname !== window.location.hostname && link.hostname !== '') {
    link.setAttribute('target', '_blank');
    link.setAttribute('rel', 'noopener noreferrer');
  }
});

Version Desktop uniquement

Sur mobile, ouvrir dans un nouvel onglet est moins pertinent (la navigation multi-onglets est moins naturelle). Pour appliquer le script uniquement sur desktop :

if (window.innerWidth >= 768) {
  document.querySelectorAll('a[href]').forEach(function(link) {
    if (link.hostname !== window.location.hostname && link.hostname !== '') {
      link.setAttribute('target', '_blank');
      link.setAttribute('rel', 'noopener noreferrer');
    }
  });
}

Conclusion

Ce script s'ajoute une fois en global et s'applique à tous les liens du site automatiquement.