Comment ouvrir de manière fiable des URL dans de nouveaux onglets au lieu de nouvelles fenêtres ?

Ouverture d'URL dans de nouveaux onglets ou dans une nouvelle fenêtre

Lorsque vous travaillez avec des liens Web, vous pouvez rencontrer des situations dans lesquelles vous souhaitez ouvrir des URL dans de nouveaux onglets plutôt que des fenêtres pop-up. Bien que certaines solutions puissent suggérer d'utiliser des commandes telles que window.open(url, '_blank'), celles-ci entraînent souvent l'ouverture de nouvelles fenêtres à la place.

Solution : Invoquer Focus

Pour résoudre ce problème, introduisez une petite astuce en appelant la méthode focus() sur la fenêtre nouvellement ouverte. Cela force le focus à être dirigé vers le nouvel onglet, garantissant qu'il ne se manifeste pas sous la forme d'une fenêtre contextuelle.

Options de mise en œuvre

Vous pouvez implémenter ceci solution de deux manières :

1. En tant que fonction personnalisable :

function openInNewTab(url) {
  window.open(url, '_blank').focus();
}

// Usage: Call the function with your desired URL
openInNewTab('www.example.com');

2. En tant qu'écouteur d'événement :

window.addEventListener('click', function(event) {
  if (event.target.nodeName === 'A') { // Check if clicked element is an anchor tag
    event.preventDefault(); // Prevent default browser behavior (opening in new window)
    window.open(event.target.href, '_blank').focus(); // Open URL in new tab
  }
});

Considérations supplémentaires :

• Pour une compatibilité maximale, invoquez focus() directement après window.open( ) appel.
• Le paramètre '_blank' est utilisé pour forcer le navigateur à ouvrir l'URL dans un nouvel onglet ou window.
• Si vous devez empêcher les bloqueurs de pop-up et conserver le comportement par défaut de « nouvelle fenêtre », incluez le code suivant :

window.open(url, '_blank').focus();

En mettant en œuvre ces solutions, vous pouvez désormais ouvrir efficacement les URL dans de nouveaux onglets, garantissant ainsi une expérience utilisateur transparente pour vos applications Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!