Maison > interface Web > tutoriel CSS > Comment ouvrir des liens dans des fenêtres personnalisées avec JavaScript à l'aide de `target=\'_blank\'` ?

Comment ouvrir des liens dans des fenêtres personnalisées avec JavaScript à l'aide de `target=\'_blank\'` ?

Susan Sarandon
Libérer: 2024-11-02 23:11:29
original
442 Les gens l'ont consulté

How to Open Links in Custom Windows with JavaScript Using `target=

Target="_blank" Liens HTML : extension des options avec JavaScript

La création de nouvelles fenêtres de navigateur avec des dimensions spécifiques peut être difficile lors de l'utilisation de la cible Attribut ="_blank" dans les balises d'ancrage HTML. Dans Mozilla Firefox, cet attribut ouvre généralement les liens dans de nouveaux onglets plutôt que dans de nouvelles fenêtres.

Pour surmonter cette limitation et fournir aux utilisateurs une fenêtre personnalisée lorsqu'ils cliquent sur votre lien, vous pouvez exploiter la puissance de JavaScript. Voici comment :

<a href="http://www.facebook.com/sharer" onclick="window.open(this.href, 'mywin',<br>' left=20,top=20,width=500,height=500,toolbar=1,resizing=0'); return false;" >Partagez ceci</a><br>

Ce code ouvrira une nouvelle fenêtre avec les spécifications suivantes :

  • window.open( ...): Ouvre une nouvelle fenêtre de navigateur.
  • this.href: Représente l'URL du lien sur lequel vous cliquez.
  • 'mywin' : Définit le nom de la nouvelle fenêtre, qui est utilisé pour l'identification.
  • 'left=20,top=20' : Spécifie la position de la fenêtre sur l'écran (20 pixels en partant de la gauche et 20 pixels en partant du haut).
  • 'width=500,height=500' : Définit la largeur et la hauteur de la fenêtre en pixels.
  • 'toolbar=1' : Active la barre d'outils du navigateur.
  • 'resizing=0' : Rend la fenêtre non redimensionnable.

En incorporant JavaScript dans votre lien HTML, vous pouvez personnaliser le comportement et l'apparence de la nouvelle fenêtre ouverte lorsque les utilisateurs cliquent sur votre lien. Cette technique permet un meilleur contrôle sur l'expérience utilisateur et offre des options flexibles pour afficher le contenu dans des fenêtres séparées.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal