Les mthodes de pop-ups et fentres

Une fentre pop-up est lune des plus anciennes mthodes pour montrer un document supplmentaire lutilisateur.

Le code suivant :

Et cela Ouvrira simplement une nouvelle fentre avec lurl renseigne. La plupart des navigateurs modernes sont configurs pour ouvrir un nouvel onglet plutt quune nouvelle fenetre.

Les pop-up existent depuis longtemps. Lide initiale tait de montrer du contenu supplmentaire sans fermer la fentre principale. Dsormais, il y a dautres manires de faire a : on peut charger du contenu dynamiquement avec fetch et lafficher dans une <div> gnre dynamiquement. Les pop-up ne sont donc plus des choses utilises de nos jours.

Les pop-up sont galement dlicate sur les appareils mobiles puis que ces derniers ne peuvent pas afficher plusieurs fentres simultanment.

Pourtant, il y a quelques tches o les pop-up sont toujours utilises, par exemple pour les authentifications OAuth (se connecter avec Google/Facebook) pour les raisons suivantes :

1. Une pop-up est une fentre spare avec son environnement JavaScript indpendant. Donc ouvrir une pop-up dune tierce partie venant dun site peu fiable est scuris.
2. Il est trs facile douvrir une pop-up.
3. Une pop-up peut naviguer, changer durl et envoyer des messages la fentre qui la ouverte.

Bloquage de pop-up

Dans le pass, des sites malveillant usaient des pop-up outrance. Une mauvaise page pouvait ouvrir beaucoup de fentre pop-up avec des pubs. Dsormais, la plupart des navigateurs essaient de bloquer les pop-up et de protger les utilisateurs.

Beaucoup de navigateurs bloquent les pop-up si elles sont appels lextrieur de gestionnaire dvnements dclenchs par lutilisateurs comme onclick.

Par exemple :

// popup bloque


// popup autorise
button.onclick = () => {
  
};

De cette manire, les utilisateurs sont en quelques sortes protgs des pop-up indsires, mais la fonctionnalit nest pas compltement dsactive.

window.open

La syntaxe pour ouvrir une pop-up est : :

url

Cest lURL charger dans la nouvelle fentre.

name

Le nom de la nouvelle fentre. Chaque fentre possde un window.name, et ici nous pouvons spcifier quelle fentre va tre utilise pour le pop-up. Sil existe dj une fentre avec le mme nom lURL donne souvrira dedans, sinon une nouvelle fentre est ouverte.

params

La chane de caractres de la configuration pour la nouvelle fentre. Elle peut contenir des paramtres spars par une virgule. Il ne peut pas y avoir despace dans les paramtres, par exemple : width:200,height=100.

Paramtres de params :

• Position :
  • left/top (numeric) paramtre la distance de la bordure gauche/suprieure par rapport la zone de travail. Il y a une limitation : une nouvelle fentre ne peux pas dpasser de lcran ou tre positionne lextrieur de celui ci.
  • width/height (numeric) paramtre la largeur et la hauteur de la nouvelle fentre. La valeur minimale requise est de 100, il est donc impossible de crer une fentre invisible.
• Caractristiques de la fentre:
  • menubar (yes/no) affiche ou cache la barre de menu du navigateur de la nouvelle fentre.
  • toolbar (yes/no) affiche ou cache la barre de navigation (bouton prcdente, suivante, actualiser etc) de la nouvelle fentre.
  • location (yes/no) affiche ou cache la barre dadresse de la nouvelle fentre. Firefox et Internet Explorer nautorisent pas sa dissimulation par dfaut.
  • status (yes/no) affiche ou cache la barre dtat de la nouvelle fentre. La plupart des navigateurs forcent sa prsence.
  • resizable (yes/no) autorise ou dsactive le redimensionnement de la nouvelle fentre. Non recommand.
  • scrollbars (yes/no) autorise ou dsactive la barre de dfilement de la nouvelle fentre. Non recommand.

Il existe galement certains paramtres spcifiques aux navigateurs qui sont moins bien supports et gnralement pas utiliss. Consultez window.open sur MDN pour plus dexemples.

Exemple: une fentre minimaliste

Ouvrons une fentre avec le minimum de paramtres fonctionnels juste pour voir quels navigateurs nous autorise les dsactiver :

let params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,
width=0,height=0,left=-1000,top=-1000`;

open('/', 'test', params);

Ici, la plupart des paramtres de fentre sont dsactivs et la fentre est positionne en dehors de lcran. Essayons ce code et voyons ce qui arrive. La plupart des navigateurs vont rgler les paramtres tranges comme le 0 width/height et le left/top hors cran. Par exemple, Chrome ouvrira cette fentre avec la largeur et la hauteur au maximum, la laissant occuper tout lcran.

Ajoutons maintenant des paramtres width, height, left, top raisonnables :

let params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,
width=600,height=300,left=100,top=100`;

open('/', 'test', params);

La plupart des navigateurs afficherons lexemple ci dessus comme exig.

Rgles des paramtres omis:

• Si il ny a pas de troisime argument pass dans la fonction open ou si elle est vide, alors les paramtres par dfaut seront utiliss pour la nouvelle fentre.
• Si il existe une chane de caractres pour les paramtres, mais que certaines options yes/no sont omises, alors celles ci prendrons par dfaut la valeur no. Donc si vous spcifiez des paramtres, assurez vous de dfinir explicitement toutes les fonctionnalits requises sur yes.
• Si il ny a pas de paramtres left/top, alors le navigateur essaiera douvrir la nouvelle fenetre au plus proche de la dernire fentre ouverte.
• Si il ny a pas de paramtres width/height, alors la nouvelle fentre seras de la mme taille que la dernire fentre ouverte.

Accder a une pop-up depuis une fentre

La fonction open retourne une rfrence la nouvelle fentre. Celle ci peut tre utilise pour manipuler ses proprits, changer sa localisation et bien plus.

Dans cet exemple, nous gnrons du contenu en pop-up avec JavaScript :

let newWin = 

newWin.document.write("Hello, world!");

Et ici nous modifions le contenu aprs le chargement:

let newWindow = open('/', 'example', 'width=300,height=300')
newWindow.focus();

alert(newWindow.location.href); // (*) about:blank, le chargement n'a pas encore commenc

newWindow.onload = function() {
  let html = `<div style="font-size:30px">Welcome!</div>`;
  newWindow.document.body.insertAdjacentHTML('afterbegin', html);
};

Il faut prendre en compte quimmdiatement aprs avoir appel window.open, la nouvelle fentre ne sest pas encore charge. On peut le constater avec alert la ligne (*). Nous devons donc attendre la fonction onload pour modifier cette fentre. Nous pourrions galement utiliser lvnement DOMContentLoaded pour newWin.document.

Accder une fentre depuis une pop-up

Une pop-up peut accder la fentre ouvrant en utilisant la rfrence window.opener. Elle vaut null pour toutes les fentres part les pop-up.

Si vous lancez le code ci dessous, cela remplacera le contenu de la fentre actuelle (ouvrant la pop-up) par Test:

let newWin = 

newWin.document.write(
  "<script>window.opener.document.body.innerHTML = 'Test'<\/script>"
);

La connexion entres les fentres est donc bidirectionnelle : la fentre principale et la pop-up ont une rfrence lune envers lautre.

Fermez une pop-up

Pour fermer une pop-up: win.close().

Pour vrifier si la fentre est ferme: win.closed.

En thorie, la mthode close() est disponible pour nimporte quelle window mais window.close() est ignore par la plupart des navigateurs si window na pas t crer avec . Cela devrait donc fonctionner seulement sur les pop-up.

La proprit closed est true si la fentre est ferme. Cest utilise pour vrifier si la pop-up (ou la fentre principale) est toujours ouverte ou non. Un utilisateur peut la fermer tout moment , et le code devrait en tenir compte.

Ce code charge et ferme une fentre:

let newWindow = open('/', 'example', 'width=300,height=300');

newWindow.onload = function() {
  newWindow.close();
  alert(newWindow.closed); // true
};

Se dplacer et redimensionner

Il existe des mthodes pour bouger/redimensionner une fentre:

win.moveBy(x,y)

Dplace la fentre de sa potion actuelle x pixels vers la droite et y pixels vers le bas. Les valeurs ngatives sont autorises (pour bouger la fentre vers la gauche/vers le haut).

win.moveTo(x,y)

Dplace la fentre aux coordonnes (x,y) sur lcran.

win.resizeBy(width,height)

Redimensionne la fentre avec les paramtres width/height relatif la taille actuelle. Les valeurs ngatives sont autorises.

win.resizeTo(width,height)

Redimensionne la fentre la taille donne.

Il existe un vnement window.onresize.

Dfilement dune fentre

Nous avons dj parl du dfilement dune fentre dans le chapitre Tailles des fentres et dfilement.

win.scrollBy(x,y)

Fait dfiler la fentre x pixels vers la droite et y vers le bas par rapport au dfilement actuel. Les valeurs ngatives sont autorises.

win.scrollTo(x,y)

Faites dfiler la fentre jusquaux coordonnes donnes (x,y).

elem.scrollIntoView(top = true)

Fait dfiler la fentre pour que les elem apparaissent en haut (par dfaut) ou en bas pour elem.scrollIntoView(false).

Il existe un vnement window.onscroll.

Mettre ou enlever le focus sur une fentre

Thoriquement, il existe des mthodes window.focus() et window.blur() pour faire/dfaire le focus sur une fentre. Il existe galement des vnements focus/blur qui permettent de saisir le moment o le visiteur focus une fentre et passe ailleurs.

Bien que, dans la pratique, ils soient svrement limits, car dans le pass, des pages malveillantes en abusaient.

Par exemple, regardez ce code :

window.onblur = () => window.focus();

Lorsquun utilisateur tente de sortir de la fentre (window.onblur), le focus va revenir dessus. Lintention est de verrouiller lutilisateur dans la window.

Les navigateurs ont donc d introduire de nombreuses limitations pour interdire ce code et protger lutilisateur des publicits et des pages malfiques. Elles dpendent du navigateur.

Par exemple, un navigateur mobile ignore gnralement compltement window.focus(). De mme, le focus ne fonctionne pas lorsquune fentre contextuelle souvre dans un onglet spar plutt que dans une nouvelle fentre.

Pourtant, il existe des cas dutilisation o de tels appels fonctionnent et peuvent tre utiles.

Par exemple :

• Lorsque nous ouvrons une pop-up, l peut tre judicieux dy lancer un newWindow.focus(). Juste au cas o, pour certaines combinaisons de systmes dexploitation/navigateurs, cela garantit que lutilisateur se trouve maintenant dans la nouvelle fentre.
• Si nous voulons savoir quand un visiteur utilise rellement notre application Web, nous pouvons suivre window.onfocus/onblur. Cela nous permet de suspendre/reprendre les activits sur la page, les animations, etc. Mais veuillez noter que lvnement blur signifie que le visiteur est sorti de la fentre, mais quil peut toujours lobserver. La fentre est en arrire-plan, mais peut toujours tre visible.

Rsum

Les fentres pop-up sont rarement utilises, car il existe des alternatives : chargement et affichage des informations dans la page, ou dans liframe.

Si nous devons ouvrir une pop-up, une bonne pratique consiste en informer lutilisateur. Une icne fentre douverture proximit dun lien ou dun bouton permettrait au visiteur de suivre le changement de focus et de garder les deux fentres lesprit.

• Une pop-up peut tre ouvert par lappel open(url, nom, params). Il renvoie la rfrence la fentre nouvellement ouverte.
• Les navigateurs bloquent les appels open du code en dehors des actions de lutilisateur. Habituellement, une notification apparat, afin que lutilisateur puisse les autoriser.
• Les navigateurs ouvrent un nouvel onglet par dfaut, mais si les tailles sont prcises, il sagira dune fentre contextuelle.
• La pop-up peut accder la fentre douverture en utilisant la proprit window.opener.
• La fentre principale et le popup peuvent se lire et se modifier librement sils ont la mme origine. Dans le cas contraire, ils peuvent changer de localisation et changer des messages.

Pour ferme une pop-up: utilisez lappel close(). Lutilisateur peut galement les fermer (comme toutes les autres fentres). Le window.closed est true aprs a.

• Les mthodes focus() et blur() permettent de faire/dfaire le focus sur une fentre. Mais elles ne fonctionnent pas tout le temps.
• Les vnements focus et blur permettent de suivre les manuvres dentre et de sortie de la fentre. Mais veuillez noter quune fentre peut tre encore visible mme en arrire-plan, aprs le blur.