Le pop-up parfait

Les plats clés

• Les fenêtres contextuelles peuvent être utilisées efficacement et de manière non invasive, à condition qu'elles soient implémentées correctement. Les défauts communs incluent des problèmes de script, des moteurs de recherche, de l'accessibilité, des outils de gestion du site, des tueurs contextuels et des options pour empêcher les fenêtres contextuelles d'ouvrir.
• Pour créer une fenêtre contextuelle parfaite, envisagez d'utiliser une fonction qui peut être placée dans un code JavaScript couramment partagé. Cette fonction peut facilement être appelée de n'importe où sur le site, et elle est plus préférable que d'écrire la fonction Window.Open à chaque fois. La fonction doit gérer l'aspect de mise au point, évaluer l'état de la fenêtre contextuelle, fermer la fenêtre contextuelle et la rouvrir avec ses nouvelles dimensions.
• Il est important de fournir un lien ou un bouton dans la fenêtre contextuelle elle-même pour permettre aux utilisateurs de le fermer. Cependant, si l'utilisateur a des scripts désactivés, le lien «Fermez cette fenêtre» doit être écrit sur la page Web à l'aide de JavaScript et vérifiez si la fenêtre a été ouverte dans le cadre d'une méthode Window.Open (). S'il s'agit d'un véritable pop-up, le lien apparaîtra et la méthode close () fonctionnera; S'il ne s'agit pas d'une véritable fenêtre contextuelle, le lien n'apparaîtra pas.

Si vous croyez que Jakob Neilsen et ses partisans, rien n'est plus mauvais que les fenêtres pop-up. Et à bien des égards, c'est correct. Pourquoi? Eh bien, nous énumérons les raisons assez tôt, mais en un mot, c'est parce qu'ils sont presque toujours mal mis en œuvre ou tout simplement pas nécessaires. Ce tutoriel montrera que, avec la bonne pensée, les fenêtres pop-up peuvent être utilisées sans déranger personne - en particulier la personne qui parcoure votre site.

Problèmes avec les pop-ups

Les défauts communs avec des fenêtres pop-up sont:

• Si les scripts sont désactivés, ou si le navigateur ne prend pas en charge JavaScript, la fenêtre contextuelle ne fonctionnera pas
• Les moteurs de recherche ne peuvent pas suivre les liens vers des fenêtres contextuelles (les éléments scriptés sont toujours ignorés)
• Les pop-ups présentent des problèmes d'accessibilité
• Les outils de gestion du site (par exemple Dreamweaver) ne peuvent pas mettre à jour des liens vers des fenêtres contextuelles si vous déplacez la page de destination vers une autre section de votre site
• Beaucoup de gens ont des tueurs pop-up qui coulent qui ferment la fenêtre au moment où il est ouvert
• À Mozilla, il y a une option pour arrêter l'ouverture des pop-ups en premier lieu

ouf. C'est tout une liste… et vous pourriez probablement ajouter la vôtre à cette liste. Alors, comment pouvons-nous aborder ces derniers?

Scripting Disabled

Avec les scripts désactivés, la fenêtre contextuelle ne fait rien. Aussi simple que ça. Mais si vous avez utilisé un standard , il n'y aurait pas de problème. Donc, au lieu d'utiliser:

<a href="#" onclick="window.open('file.htm');"> 

vous pouvez utiliser:

<a href="file.htm" onclick="window.open('file.htm');return false;">

de cette façon, si le script est désactivé, le lien standard fonctionne toujours.

Cependant, il y a peut-être une très bonne raison pour laquelle vous voulez que la fenêtre s'ouvre sur le dessus de la fenêtre actuelle. Si c'est le cas, ajoutez simplement un attribut cible comme ça:

<a href="#" onclick="window.open('file.htm');"> 

bingo. Problème résolu. Mais il y a plus que nous pouvons faire à cela!

Moteurs de recherche

Avec le code modifié ci-dessus, les moteurs de recherche obtiennent un HREF standard à suivre, donc c'est un autre problème coché notre liste de problèmes.

Problèmes d'accessibilité

La plus grande faute des pop-ups est qu'ils éloignent l'attention de la fenêtre du navigateur principal, et cela peut être déconcertant. Ils présentent également des problèmes généraux d'utilisation en dehors de l'accessibilité. Combien de fois avez-vous vu quelqu'un lancer une fenêtre contextuelle, puis cliquez par inadvertance sur la fenêtre du lanceur et, pensant que rien ne s'est passé, cliquez à nouveau sur le lien sans résultat? Bien sûr, la fenêtre s'est ouverte, mais elle est maintenant sous la fenêtre de lanceur, et se diriger uniquement vers la barre de tâche et la sélection de la fenêtre à partir de là.

L'astuce consiste à informer l'utilisateur que le lien s'ouvrira dans une nouvelle fenêtre. Il existe plusieurs façons de résoudre ce problème:

Inclure des instructions dans le cadre du lien lui-même
Ajoutez des instructions dans un attribut de titre
Utilisez une icône appropriée pour signifier qu'un pop-up est imminent

De cette façon, si la mise au point est perdue, l'utilisateur peut établir la connexion, par exemple:
Ouvrez ma page de test (s'ouvre dans une fenêtre contextuelle)

Ouvrir ma page de test

Pour résoudre le problème de la perte de focus sur la fenêtre principale, vous pouvez utiliser JavaScript pour réinitialiser l'objectif. Un script proposé pour cela apparaît à la fin de cet article.

Outils de gestion des liens de site

Si vous avez l'habitude de déplacer des pages en utilisant des outils comme Dreamweaver ou un système de gestion de contenu, vous espérez que les liens seront maintenus. Avec HREFS standard, ils le sont généralement (selon l'outil que vous utilisez), mais avec JavaScript, c'est peu probable. Retour à notre code pendant un moment:

<a href="file.htm" onclick="window.open('file.htm');return false;">

Le lien ci-dessus serait très bien maintenu… presque. La moitié de ce serait - la partie HREF. Mais la partie onclick serait probablement ignorée. C'est un gros problème. Vous pourriez penser que vos liens ont été mis à jour, mais en fait, les gens qui ont un JavaScript activé seraient envoyés à une page manquante. Ainsi, vous pourriez constater que votre code serait modifié en:

<a href="file.htm" onclick="window.open('file.htm'); <br>
return false;" target="newWin">

Et si vous deviez exécuter un validateur de lien sur la page de lancement, il semblerait que votre lien soit en effet valide. Alors, comment résumons-nous ce problème? Comme ainsi:

<a href="file.htm" onclick="window.open('file.htm');  <br>
return false;">

Il n'y a qu'un seul lien à maintenir, et le HREF correct sera utilisé pour la méthode Window.Open. Excellent - maintenant nous arrivons quelque part!

Les tueurs pop-up / mozilla désactivent les pop-ups

Comme avec le problème de la désactivation de JavaScript, la simple fourniture d'un HREF standard signifie que le lien fonctionnera toujours. Maintenant, nous n'avons qu'à résoudre le problème de quelle fenêtre a la focalisation…

Le script pop-up parfait

Nous recommandons d'utiliser une fonction qui peut être placée dans un code JavaScript couramment partagé (comme nous l'avons fait avec ce site), et qui peut facilement être appelé de n'importe où dans le site. Ceci est beaucoup plus préférable que d'écrire laborieusement la fonction de la fenêtre.Open à chaque fois. En plus de l'URL, vous voudrez peut-être inclure des paramètres tels que la hauteur et la largeur, et quel type de style pop-up à choisir (c'est à vous de vos styles que vous définissez).

Voici le code que je recommande:

<a href="#" onclick="window.open('file.htm');"> 

Le code supplémentaire de la fonction gère l'aspect de mise au point. Si vous cliquez sur un lien qui appelle cette fonction, puis cliquez sur la page de telle sorte que la fenêtre contextuelle est masquée, puis cliquez sur un autre lien contextuel, le code évalue l'état de la fenêtre contextuelle, puis ferme la fenêtre contextuelle et la rouvre avec ses nouvelles dimensions.

pour appeler la fonction, vous utiliseriez le code suivant:

<a href="file.htm" onclick="window.open('file.htm');return false;">

ou, pour utiliser quelques exemples réels:

ceci est mon lien contextuel (mode console)
Ce est mon pop-up (mode fixe)
Ce est mon (mode élastique)

Remarque: la partie «return false» annule efficacement l'action par défaut du HREF, donc il n'ouvrira pas la fenêtre contextuelle et une fenêtre HTML normale - elle ouvrira l'une ou l'autre. Essayez les liens ci-dessus avec et sans JavaScript Activé de voir par vous-même.

Que pourriez-vous demander de plus? Eh bien… il y a un dernier morceau de glaçage sur ce gâteau.

Clôture du pop-up

Une fois la fenêtre contextuelle ouverte, nous pouvons compter sur les personnes pour utiliser les commandes du navigateur / système d'exploitation pour fermer la fenêtre nouvellement ouverte.

Mais les gens ne font pas toujours ça! Nous devons donc fournir un lien (ou un bouton, si vous préférez) dans la fenêtre contextuelle elle-même pour permettre aux utilisateurs de le fermer. Cependant, supposons que notre utilisateur a des scripts désactivés et que la fenêtre contextuelle a été ouverte via la route HREF standard. Le lien «Fermez cette fenêtre» que vous avez si réfléchie provoquera un dialogue pas très amical comme ceci:

Pour contourner ce problème, vous devez écrire le lien de fermeture vers la page Web à l'aide de JavaScript et vérifier si la fenêtre a été ouverte dans le cadre d'une méthode Window.Open (). De cette façon, s'il s'agit d'un véritable pop-up, le lien apparaîtra et la méthode close () fonctionnera; S'il ne s'agit pas d'une véritable fenêtre contextuelle, le lien n'apparaîtra pas.

Voici le code pour faire ceci:

<a href="file.htm" onclick="window.open('file.htm'); <br>
return false;" target="newWin">

essayez à nouveau le lien et voyez par vous-même:

ceci est mon pop-up (mode fixe)

Conclusion

Espérons que ce tutoriel a démontré que les liens pop-up peuvent être accessibles, conviviaux et non invasifs de recherche. Cependant, même si vous suivez tous ces conseils, vous devez toujours vous demander si vous avez vraiment besoin d'ouvrir une nouvelle fenêtre.

Un dernier point à noter est que les fenêtres contextuelles devraient être quelque chose que les gens optent pour utiliser, alors n'utilisez pas une fenêtre. Cela agace toujours le diable des gens… à moins qu'ils ne voulaient acheter une caméra X10 ou visiter le «plus grand casino en ligne du monde» mais ne le savait pas, c'est-à-dire!

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!