Please enable JavaScript!
Bitte aktiviere JavaScript!
S'il vous plaît activer JavaScript!
Por favor,activa el JavaScript!
antiblock.org

Créer une fenêtre pop-up pour un site

 

Parfois il est utile d'ajouter un popup à vos pages. Quand l'utilisateur clique dessus un lien, une nouvelle fenêtre s'ouvre et montre une page.

Il y a deux manières de faire ceci. Vous pouvez ajouter un TARGET= " _blank " au <a>-tag, mais ceci ouvre simplement une nouvelle fenêtre de navigateur qui obscurcit complètement la page courante.

Peut-être c'est ce que vous voulez, mais parfois une petite fenêtre sur la grande fenêtre de navigateur est bien mieux. Cette petite fenêtre est populairement connue comme popup.

D'abord la syntaxe de base de la façon de créer un popup, puis une explication du script, y compris une table des arguments les plus communs que vous pouvez attribuer à un popup et au problème de la focalisation.
Puis une nouvelle manière d'ajouter le comportement automatique à un lien. Cet emplacement emploie le nouveau système parce qu'il est beaucoup plus propre que le vieil.
Enfin quelques notes au sujet du contenu d'écriture directement dans le popup. Ceci donne plusieurs problèmes, d'une manière plus importante la confusion au-dessus d'exactement ce qui est l'URL du popup.

Création d'un popup

Pour créer un popup vous aurez besoin du code script suivant :

<script language="javascript" type="text/javascript">
<!--
function popitup(url) {
newwindow=window.open(url,'name','height=200,width=150');
if (window.focus) {newwindow.focus()}
return false;
}
// -->
</script>

Puis, vous créez un lien comme ceci:

<a href="popupex.html" onclick="return popitup('popupex.html')"
>Lien vers le popup</a>


Explication

D'abord, vous ouvrez la nouvelle fenêtre. La page à ouvrir est passée dessus par l'URL d'argument. Notez que, si vous voulez ouvrir une page sur un autre serveur, l'explorateur donnera fréquemment des erreurs. C'est un dispositif, pas un bogue, tellement là est peu que vous pouvez faire à son sujet.

Vous devez donner un nom à la fenêtre (dans ce cas-ci, nom). Ce nom peut être employé comme cible d'un lien.

En outre, vous devez charger la fenêtre dans une variable de Javascript. Les raisons de ceci sont complexes et ont la plupart du temps pour faire avec empêcher des erreurs dans divers navigateurs, particulièrement quand vous voulez que plus de liens mènent au même popup.

function popitup(url) {
newwindow=window.open(url,'name','height=200,width=150');

Arguments

Tellement d'abord nous définissons l'URL à charger dans le popup et puis le nom inutile.

En tant que troisièmement argument, vous pouvez assigner toutes sortes de variables. La plupart de terrain communal sont taille et largeur, qui définissent la taille et la largeur de la nouvelle fenêtre.

'height=200,width=150'

Cible

Alors nous plaçons le foyer sur la nouvelle fenêtre de sorte qu'elle soit sur la fenêtre principale. Premier contrôle si le navigateur soutient la méthode de foyer (), si ainsi endroit le foyer sur la nouvelle fenêtre.

if (window.focus) {newwindow.focus()}

Accessibilité

Enfin nous renvoyons faux. C'est d'empêcher le navigateur de suivre le lien réel.

return false;
}

En appelant le script, assurez-vous que vous faites ceci :

<a href="popupex.html" onclick="return popitup('popupex.html')"
>Lien vers le popup</a>

Le lien normal mène à la page que vous voulez montrer, alors que le script automatique s'appelle dans le traiteur d'événement d'onclick. Quand le manuscrit s'appelle, il retourne faux pour empêcher le navigateur de suivre le lien.

Le tour est que quand le Javascript est désactivé et le script automatique ne fonctionne pas, le lien mène simplement à la page. Ainsi vos popups restent parfaitement accessibles.
Attributs faits sur commande

Je déclare des liens automatiques comme suit :

<p>Voir aussi <a href="../key.html" type="popup"
>key</a> mes tableaux compatibles.</p>

Notez attribut " automatique " fait sur commande de type=. Chaque fois que vous chargez une nouvelle page, un script d'onload est exécuté. Une des choses qu'elle fait est :

var x = document.getElementsByTagName('a');
for (var i=0;i<x.length;i++) {
if (x[i].getAttribute('type') == 'popup') {
x[i].onclick = function () {
return pop(this.href)
}
x[i].title += ' (Popup)';
}
}

Je passe par tous les liens à la page et vérifie cet attribut. Si le script le trouve, il ajoute le traiteur d'événement d'un onclick :

x[i].onclick = function () {
return pop(this.href)
}

 

Le traiteur d'événement appelle le bruit de fonction () (qui est presque identique que le popitup de fonction d'essai () j'emploie à cette page). Il passe this.href comme argument, qui est le href réel du lien l'utilisateur cliqué sur dessus. le bruit () renvoie faux pour les raisons d'accessibilité que j'ai décrites ci-dessus, et le traiteur d'événement le renvoie à l'événement, de sorte que le lien réel ne soit pas suivi.

Simple et nettoyez, des travaux en tous les navigateurs. Le seul léger inconvénient est qu'aucune spécification courante de XHTML ne permet l'utilisation des attributs faits sur commande. Personnellement je ne m'inquiète pas, mais si vous souhaitez écrire XHTML impeccable vous ne pouvez pas employer cette technique.
Inscription dans des popups

L'inscription du contenu directement dans le popup ne fonctionne pas dans l'explorateur 3 sur Windows, Konqueror 2.2.2 et Omniweb.

Comme vous avez vu ci-dessus, vous pouvez charger une nouvelle page dans le popup. Cependant il est également possible d'écrire le contenu dans le popup au moyen de Javascript. Ceci a l'avantage dont vous n'avez pas besoin pour écrire une page entièrement nouvelle pour l'affichage dans le popup, mais il a également des inconvénients.

Ceci est fait comme suit :

function popitup2() {
newwindow2=window.open('','name','height=200,width=150');
var tmp = newwindow2.document;
tmp.write('<html><head><title>popup</title>');
tmp.write('<link rel="stylesheet" href="js.css">');
tmp.write('</head><body><p>this is once again a popup.</p>');
tmp.write('<p><a href="javascript:alert(self.location.href)">view location</a>.</p>');
tmp.write('<p><a href="javascript:self.close()">close</a> the popup.</p>');
tmp.write('</body></html>');
tmp.close();
}

 

Comme vous voyez, ouvrez la fenêtre, écrivez le HTML dans newwindow2.document et cela fonctionne. Le document.close () à l'extrémité est quelque chose différente qu'un window.close (), il signifie un peu que le document à l'intérieur du popup est fermé pour l'écriture. J'ai trouvé que dehors ce rapport est nécessaire dans Netscape 2, 3 et 4 pour voir n'importe quoi du tout et dans l'opéra 5 quand vous voulez ouvrir le popup plus d'une fois. Sans rapport vous pouvez l'ouvrir seulement une fois, la prochaine fois que vous cliquez sur dessus le lien que rien ne se produit.
Explorateur 4 sur Windows

L'explorateur 4 sur Windows est un navigateur problématique. D'abord il a immuablement refusé d'exécuter le script ci-dessus, même lorsque j'ai changé chaque document.write en document.writeln conformément à l'avis d'un lecteur. Alors quand j'ai remis en marche mon ordinateur, l'explorateur 4 refuse toujours d'exécuter le script correctement, quoique le code soit exact. Au moment où je ne suis pas sûr s'il soutient cette manière de l'écriture à un popup ou pas. Il semble fonctionner.

Ainsi je ne garantis pas la compatibilité de l'explorateur 4, mais le manuscrit fonctionnera probablement.
L'URL du popup

L'opéra 3 et le Hotjava 3 donnent le « blanc » comme URL du popup, alors que l'opéra 5 sur le Mac pense que c'est ~i.

Opéra 5.11 - sur l'accident de Windows et de Linux sur le lien d'endroit de vue.

Il y a un crochet cependant : quel est exactement l'URL de la page dans le popup ? Car vous pourriez avoir prévu, les différents navigateurs ont différents avis. Je mets un lien « endroit de vue » dans le popup qui montre le location.href de la page. Habituellement l'endroit est cette page, popup.html, qui est parce que le navigateur voit le popup comme genre de partie prolongée de cette page.

J'ai noté ce problème parce qu'un collègue du mien a voulu employer cette sorte de manuscrit pour la fabrication un imprimeur de la version amicale d'une page. Écrivez le contenu dans un popup, avec le marge bénéficiaire bénéficiaire minimal, et puis laissez l'utilisateur presser « "IMPRESSION" ». Malheureusement la plupart des navigateurs ont imprimé la page principale parce qu'ils ont exécuté la commande d'impression () pour le location.href (la page principale), était pas du tout qui ce qu'il a eu à l'esprit.

Intéressant, la commande de self.close () clôture toujours correctement le popup, pas la page principale.

Voir aussi ce tuto sur les popups.

 

Dreamweaver® est une marque déposée d'Adobe® Systems Incorporated. Les logos et les noms de marques cités dans ce site sont les propriétés respectives de leurs développeurs.

 

Création de sites web

hit counter