`. So, popups is not something we use everyday. +Les pop-up existent depuis longtemps. L'idée initiale était de montrer du contenu supplémentaire sans fermer la fenêtre principale. Désormais, il y a d'autres manières de faire ça : on peut charger du contenu dynamiquement avec [fetch](info:fetch) et l'afficher dans une `

` générée dynamiquement. Les pop-up ne sont donc plus des choses utilisées de nos jours. -Also, popups are tricky on mobile devices, that don't show multiple windows simultaneously. +Les pop-up sont également délicate sur les appareils mobiles puis que ces derniers ne peuvent pas afficher plusieurs fenêtres simultanément. -Still, there are tasks where popups are still used, e.g. for OAuth authorization (login with Google/Facebook/...), because: +Pourtant, il y a quelques tâches où les pop-up sont toujours utilisées, par exemple pour les authentifications OAuth (se connecter avec Google/Facebook..) pour les raisons suivantes: +1. Une pop-up est une fenêtre séparée avec son environnement JavaScript indépendant. Donc ouvrir une pop-up d'une tierce partie venant d'un site peu fiable est sécurisé. //So opening a popup with a third-party non-trusted site is safe. +2. Il est très facile d'ouvrir une pop-up. +3. Une pop-up peut naviguer, changer d'url et envoyer des messages à la fenêtre qui l'a ouverte. -1. A popup is a separate window with its own independent JavaScript environment. So opening a popup with a third-party non-trusted site is safe. -2. It's very easy to open a popup. -3. A popup can navigate (change URL) and send messages to the opener window. +## Bloquage de pop-up -## Popup blocking +Dans le passé, des sites malveillant usaient des pop-up à outrance. Une mauvaise page pouvait ouvrir beaucoup de fenêtre pop-up avec des pubs. Désormais, la plupart des navigateurs essaient de bloquer les pop-up et de protéger les utilisateurs. -In the past, evil sites abused popups a lot. A bad page could open tons of popup windows with ads. So now most browsers try to block popups and protect the user. +**Beaucoup de navigateurs bloquent les pop-up si elles sont appelés à l'extérieur de gestionnaire d'évènements déclenchés par l'utilisateurs comme `onclick`.** -**Most browsers block popups if they are called outside of user-triggered event handlers like `onclick`.** - -For example: +Par exemple: ```js -// popup blocked +// popup bloquée window.open('https://javascript.info'); -// popup allowed +// popup autorisée button.onclick = () => { window.open('https://javascript.info'); }; ``` -This way users are somewhat protected from unwanted popups, but the functionality is not disabled totally. +De cette manière, les utilisateurs sont en quelques sortes protégés des pop-up indésirées, mais la fonctionnalité n'est pas complètement désactivée. -What if the popup opens from `onclick`, but after `setTimeout`? That's a bit tricky. +Et si la pop-up s'ouvre depuis un `onclick`, mais après un `setTimeout` ? C'est un peu délicat. -Try this code: +Essayons ce code: ```js run -// open after 3 seconds +// s'ouvre après 3 secondes setTimeout(() => window.open('http://google.com'), 3000); ``` -The popup opens in Chrome, but gets blocked in Firefox. +La pop-up s'ouvre dans Chrome, mais elle est bloquée dans Firefox. -...If we decrease the delay, the popup works in Firefox too: +...Si nous diminuons le délai, la pop-up s'ouvre dans Firefox également: ```js run -// open after 1 seconds +// s'ouvre après 1 seconde setTimeout(() => window.open('http://google.com'), 1000); ``` -The difference is that Firefox treats a timeout of 2000ms or less are acceptable, but after it -- removes the "trust", assuming that now it's "outside of the user action". So the first one is blocked, and the second one is not. +La différence est que Firefox traite le timeout de 2000ms ou moins comme acceptable, mais au delà, il enlève la "confiance", assumant que désormais c'est "hors de l'action de l'utilisateur". Donc le premier cas est bloqué, quand le second ne l'est pas. ## window.open -The syntax to open a popup is: `window.open(url, name, params)`: +La syntaxe pour ouvrir une pop-up est : `window.open(url, name, params)`: url -: An URL to load into the new window. +: C'est l'URL à charger dans la nouvelle fenêtre. name -: A name of the new window. Each window has a `window.name`, and here we can specify which window to use for the popup. If there's already a window with such name -- the given URL opens in it, otherwise a new window is opened. +: Le nom de la nouvelle fenêtre. Chaque fenêtre possède un `window.name`, et ici nous pouvons spécifier quelle fenêtre va être utilisée pour le pop-up. S'il existe déjà une fenêtre avec le même nom -- l'URL donnée s'ouvrira dedans, sinon une nouvelle fenêtre est ouverte. params -: The configuration string for the new window. It contains settings, delimited by a comma. There must be no spaces in params, for instance: `width:200,height=100`. +: La chaîne de caractères de la configuration de la nouvelle fenêtre. Elle peut contenir des paramètres séparés par une virgule. Il ne peut pas y avoir d'espace dans les paramètres, par exemple : `width:200,height=100`. -Settings for `params`: +Paramètres de `params`: - Position: - - `left/top` (numeric) -- coordinates of the window top-left corner on the screen. There is a limitation: a new window cannot be positioned offscreen. - - `width/height` (numeric) -- width and height of a new window. There is a limit on minimal width/height, so it's impossible to create an invisible window. -- Window features: - - `menubar` (yes/no) -- shows or hides the browser menu on the new window. - - `toolbar` (yes/no) -- shows or hides the browser navigation bar (back, forward, reload etc) on the new window. - - `location` (yes/no) -- shows or hides the URL field in the new window. FF and IE don't allow to hide it by default. - - `status` (yes/no) -- shows or hides the status bar. Again, most browsers force it to show. - - `resizable` (yes/no) -- allows to disable the resize for the new window. Not recommended. - - `scrollbars` (yes/no) -- allows to disable the scrollbars for the new window. Not recommended. + - `left/top` (numeric) -- paramètre la distance de la bordure gauche/supérieure par rapport à la zone de travail. Il y a une limitation : une nouvelle fenêtre ne peux pas dépasser de l'écran ou être positionnée à l'extérieur de celui ci. + - `width/height` (numeric) -- paramètre la largeur et la hauteur de la nouvelle fenêtre. La valeur minimale requise est de 100, il est donc impossible de créer une fenêtre invisible. +- Caractéristiques de la fenêtre: + - `menubar` (yes/no) -- affiche ou cache la barre de menu du navigateur de la nouvelle fenêtre. + - `toolbar` (yes/no) -- affiche ou cache la barre de navigation (bouton précédente, suivante, actualiser etc) de la nouvelle fenêtre. + - `location` (yes/no) -- affiche ou cache la barre d'adresse de la nouvelle fenêtre. Firefox et Internet Explorer n'autorisent pas sa dissimulation par défaut. + - `status` (yes/no) -- affiche ou cache la barre d'état de la nouvelle fenêtre. La plupart des navigateurs forcent sa présence. + - `resizable` (yes/no) -- autorise ou désactive le redimensionnement de la nouvelle fenêtre. Non recommandé. + - `scrollbars` (yes/no) -- autorise ou désactive la barre de défilement de la nouvelle fenêtre. Non recommandé. -There is also a number of less supported browser-specific features, which are usually not used. Check window.open in MDN for examples. +Il existe également certains paramètres spécifiques aux navigateurs qui sont moins bien supportés et généralement pas utilisés. Consultez window.open sur MDN pour plus d'exemples. -## Example: a minimalistic window +## Exemple: une fenêtre minimaliste -Let's open a window with minimal set of features just to see which of them browser allows to disable: +Ouvrons une fenêtre avec le minimum de paramètres fonctionnels juste pour voir quels navigateurs nous autorise à les désactiver: ```js run let params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no, @@ -98,9 +97,9 @@ width=0,height=0,left=-1000,top=-1000`; open('/', 'test', params); ``` -Here most "window features" are disabled and window is positioned offscreen. Run it and see what really happens. Most browsers "fix" odd things like zero `width/height` and offscreen `left/top`. For instance, Chrome open such a window with full width/height, so that it occupies the full screen. +Ici, la plupart des paramètres de fenêtre sont désactivés et la fenêtre est positionnée en dehors de l'écran. Essayons ce code et voyons ce qui arrive. La plupart des navigateurs vont règler les paramètres étranges comme le 0 `width/height` et le `left/top` hors écran. Par exemple, Chrome ouvrira cette fenêtre avec la largeur et la hauteur au maximum, la laissant occuper tout l'écran. -Let's add normal positioning options and reasonable `width`, `height`, `left`, `top` coordinates: +Ajoutons maintenant des paramètres `width`, `height`, `left`, `top` raisonnables : ```js run let params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no, @@ -109,20 +108,20 @@ width=600,height=300,left=100,top=100`; open('/', 'test', params); ``` -Most browsers show the example above as required. +La plupart des navigateurs afficherons l'exemple ci dessus comme exigé. -Rules for omitted settings: +Règles des paramètres omis: -- If there is no 3rd argument in the `open` call, or it is empty, then the default window parameters are used. -- If there is a string of params, but some `yes/no` features are omitted, then the omitted features assumed to have `no` value. So if you specify params, make sure you explicitly set all required features to yes. -- If there is no `left/top` in params, then the browser tries to open a new window near the last opened window. -- If there is no `width/height`, then the new window will be the same size as the last opened. +- Si il n'y a pas de troisième argument passé dans la fonction `open` ou si elle est vide, alors les paramètres par défaut seront utilisés pour la nouvelle fenêtre. +- Si il existe une chaîne de caractères pour les paramètres, mais que certaines options `yes/no` sont omises, alors celles ci prendrons par défaut la valeur `no`. Donc si vous spécifiez des paramètres, assurez vous de définir explicitement toutes les fonctionnalités requises sur `yes`. +- Si il n'y a pas de paramètres `left/top`, alors le navigateur essaiera d'ouvrir la nouvelle feneêtre au plus proche de la dernière fenêtre ouverte. +- Si il n'y a pas de paramètres `width/height`, alors la nouvelle fenêtre seras de la même taille que la dernière fenêtre ouverte. -## Accessing popup from window +## Accèder a une pop-up depuis une fenêtre -The `open` call returns a reference to the new window. It can be used to manipulate it's properties, change location and even more. +La fonction `open` retourne une référence à la nouvelle fenêtre. Celle ci peut être utilisée pour manipuler ses propriétés, changer sa localisation et bien plus. -In this example, we generate popup content from JavaScript: +Dans cet exemple, nous générons du contenu en pop-up avec Javascript: ```js let newWin = window.open("about:blank", "hello", "width=200,height=200"); @@ -130,13 +129,13 @@ let newWin = window.open("about:blank", "hello", "width=200,height=200"); newWin.document.write("Hello, world!"); ``` -And here we modify the contents after loading: +Et ici nous modifions le contenu après le chargement: ```js run let newWindow = open('/', 'example', 'width=300,height=300') newWindow.focus(); -alert(newWindow.location.href); // (*) about:blank, loading hasn't started yet +alert(newWindow.location.href); // (*) about:blank, le chargement n'a pas encore commencé newWindow.onload = function() { let html = `

Welcome!

`; @@ -146,19 +145,20 @@ newWindow.onload = function() { }; ``` -Please note: immediately after `window.open`, the new window isn't loaded yet. That's demonstrated by `alert` in line `(*)`. So we wait for `onload` to modify it. We could also use `DOMContentLoaded` handler for `newWin.document`. +Il faut prendre en compte qu'immédiatement après avoir appelé `window.open`, la nouvelle fenêtre ne s'est pas encore chargée. On peut le constater avec `alert` à la ligne `(*)`. Nous devons donc attendre la fonction `onload` pour modifier cette fenêtre. Nous pourrions également utiliser l'évènement `DOMContentLoaded` pour `newWin.document`. + ```warn header="Same origin policy" -Windows may freely access content of each other only if they come from the same origin (the same protocol://domain:port). +Les fenêtres peuvent avoir accès au contenu de chacunes d'entres elles si elles ont la même origine (le même protocol://domain:port). -Otherwise, e.g. if the main window is from `site.com`, and the popup from `gmail.com`, that's impossible for user safety reasons. For the details, see chapter . +Autrement, par exemple si la fenêtre principale vient de `site.com` et la pop-up de `gmail.com`, cela devient impossible pour des raisons de sécurité utilisateur. Pour plus de détails, vous pouvez consulter le chapitre . ``` -## Accessing window from popup +## Accèder à une fenêtre depuis une pop-up -A popup may access the "opener" window as well using `window.opener` reference. It is `null` for all windows except popups. +Une pop-up peut accèder à la fenêtre ouvrant en utilisant la référence `window.opener`. Elle vaut `null` pour toutes les fenêtres à part les pop-up. -If you run the code below, it replaces the opener (current) window content with "Test": +Si vous lancez le code ci dessous, cela remplacera le contenu de la fenêtre actuelle (ouvrant la pop-up) par "Test": ```js run let newWin = window.open("about:blank", "hello", "width=200,height=200"); @@ -168,19 +168,19 @@ newWin.document.write( ); ``` -So the connection between the windows is bidirectional: the main window and the popup have a reference to each other. +La connexion entres les fenêtres est donc bidirectionnelle : la fenêtre principale et la pop-up ont une référence l'une envers l'autre. -## Closing a popup +## Fermez une pop-up -To close a window: `win.close()`. +Pour fermer une pop-up: `win.close()`. -To check if a window is closed: `win.closed`. +Pour vérifier si la fenêtre est fermée: `win.closed`. -Technically, the `close()` method is available for any `window`, but `window.close()` is ignored by most browsers if `window` is not created with `window.open()`. So it'll only work on a popup. +En théorie, la méthode `close()` est disponible pour n'importe quelle `window` mais `window.close()` est ignorée par la plupart des navigateurs si `window` n'a pas été créer avec `window.open()`. Cela devrait donc fonctionner seulement sur les pop-up. -The `closed` property is `true` if the window is closed. That's useful to check if the popup (or the main window) is still open or not. A user can close it anytime, and our code should take that possibility into account. +La propriété `closed` est `true` si la fenêtre est fermée. C'est utilise pour vérifier si la pop-up (ou la fenêtre principale) est toujours ouverte ou non. Un utilisateur peut la fermer à tout moment , et le code devrait en tenir compte. -This code loads and then closes the window: +Ce code charge et ferme une fenêtre: ```js run let newWindow = open('/', 'example', 'width=300,height=300'); @@ -192,85 +192,86 @@ newWindow.onload = function() { ``` -## Scrolling and resizing +## Scroller et redimensionner -There are methods to move/resize a window: +Il existe des méthodes pour bouger/redimensionner une fenêtre: `win.moveBy(x,y)` -: Move the window relative to current position `x` pixels to the right and `y` pixels down. Negative values are allowed (to move left/up). +: Déplace la fenêtre de sa potion actuelle `x` pixels vers la droite et `y` pixels vers le bas. Les valeurs négatives sont autorisées (pour bouger la fenêtre vers la gauche/vers le haut). `win.moveTo(x,y)` -: Move the window to coordinates `(x,y)` on the screen. +: Déplace la fenêtre aux coordonnées `(x,y)` sur l'écran. `win.resizeBy(width,height)` -: Resize the window by given `width/height` relative to the current size. Negative values are allowed. +: Redimensionne la fenêtre avec les paramètres `width/height` relatif à la taille actuelle. Les valeurs négatives sont autorisées. + `win.resizeTo(width,height)` -: Resize the window to the given size. +: Redimensionne la fenêtre à la taille donnée. -There's also `window.onresize` event. +Il existe un évènement `window.onresize`. ```warn header="Only popups" -To prevent abuse, the browser usually blocks these methods. They only work reliably on popups that we opened, that have no additional tabs. +Pour éviter les abus, le navigateur bloque généralement ces méthodes. Elles ne fonctionnent de manière fiable que sur les popups que nous avons ouverts, qui n'ont pas d'onglet supplémentaire. ``` ```warn header="No minification/maximization" -JavaScript has no way to minify or maximize a window. These OS-level functions are hidden from Frontend-developers. +JavaScript n'a aucun moyen de réduire ou d'agrandir une fenêtre. Ces fonctions au niveau du système d'exploitation sont cachées aux développeurs de Frontend. -Move/resize methods do not work for maximized/minimized windows. +Les méthodes de déplacement/redimensionnement ne fonctionnent pas pour les fenêtres maximisées/minimisées. ``` -## Scrolling a window +## Défilement d'une fenêtre -We already talked about scrolling a window in the chapter . +Nous avons déjà parlé du défilement d'une fenêtre dans le chapitre . `win.scrollBy(x,y)` -: Scroll the window `x` pixels right and `y` down relative the current scroll. Negative values are allowed. +: Fait défiler la fenêtre `x` pixels vers la droite et `y` vers le bas par rapport au défilement actuel. Les valeurs négatives sont autorisées. `win.scrollTo(x,y)` -: Scroll the window to the given coordinates `(x,y)`. +: Faites défiler la fenêtre jusqu'aux coordonnées données `(x,y)`. `elem.scrollIntoView(top = true)` -: Scroll the window to make `elem` show up at the top (the default) or at the bottom for `elem.scrollIntoView(false)`. +: Fait défiler la fenêtre pour que les `elem` apparaissent en haut (par défaut) ou en bas pour `elem.scrollIntoView(false)`. -There's also `window.onscroll` event. +Il existe un évènement `window.onscroll`. -## Focus/blur on a window +## Mettre ou enlever le focus sur une fenêtre -Theoretically, there are `window.focus()` and `window.blur()` methods to focus/unfocus on a window. Also there are `focus/blur` events that allow to focus a window and catch the moment when the visitor switches elsewhere. +Théoriquement, il existe des méthodes `window.focus()` et `window.blur()` pour faire le focus/défaire le focus sur une fenêtre. Il existe également des événements `focus/blur` qui permettent de focaliser une fenêtre et de saisir le moment où le visiteur passe ailleurs. -In the past evil pages abused those. For instance, look at this code: +Dans le passé, les pages malveillantes en abusaient. Par exemple, avec ce code : ```js run window.onblur = () => window.focus(); ``` -When a user attempts to switch out of the window (`blur`), it brings it back to focus. The intention is to "lock" the user within the `window`. +Lorsqu'un utilisateur tente de sortir de la fenêtre (`blur`), le focus va revenir dessus. L'intention est de "verrouiller" l'utilisateur dans la `window`. -So, there are limitations that forbid the code like that. There are many limitations to protect the user from ads and evils pages. They depend on the browser. +Il y a donc des limitations qui interdisent ce genre de code. Il y a de nombreuses limitations pour protéger l'utilisateur des publicités et des pages malveillantes. Elles dépendent du navigateur. -For instance, a mobile browser usually ignores that call completely. Also focusing doesn't work when a popup opens in a separate tab rather than a new window. +Par exemple, un navigateur mobile ignore généralement complètement cet appel. De même, la mise au point ne fonctionne pas lorsqu'une fenêtre contextuelle s'ouvre dans un onglet séparé plutôt que dans une nouvelle fenêtre. -Still, there are some things that can be done. +Cependant, certaines choses peuvent être faites. -For instance: +Par exemple: -- When we open a popup, it's might be a good idea to run a `newWindow.focus()` on it. Just in case, for some OS/browser combinations it ensures that the user is in the new window now. -- If we want to track when a visitor actually uses our web-app, we can track `window.onfocus/onblur`. That allows us to suspend/resume in-page activities, animations etc. But please note that the `blur` event means that the visitor switched out from the window, but they still may observe it. The window is in the background, but still may be visible. +- Lorsque nous ouvrons une pop-up, l peut être judicieux d'y lancer un `newWindow.focus()`. Juste au cas où, pour certaines combinaisons de systèmes d'exploitation/navigateurs, cela garantit que l'utilisateur se trouve maintenant dans la nouvelle fenêtre. +- Si nous voulons savoir quand un visiteur utilise effectivement notre site web, nous pouvons suivre `window.onfocus/onblur`. Cela nous permet de suspendre/reprendre les activités en page, les animations, etc. Mais veuillez noter que l'événement `blur` signifie que le visiteur a quitté la fenêtre, mais qu'il peut toujours l'observer. La fenêtre est en arrière-plan, mais elle peut être toujours visible. -## Summary +## Résumé -Popup windows are used rarely, as there are alternatives: loading and displaying information in-page, or in iframe. +Les fenêtres pop-up sont rarement utilisées, car il existe des alternatives : chargement et affichage des informations dans la page, ou dans l'iframe. -If we're going to open a popup, a good practice is to inform the user about it. An "opening window" icon near a link or button would allow the visitor to survive the focus shift and keep both windows in mind. +Si nous devons ouvrir une pop-up, une bonne pratique consiste à en informer l'utilisateur. Une icône "fenêtre d'ouverture" à proximité d'un lien ou d'un bouton permettrait au visiteur de suivre le changement de focus et de garder les deux fenêtres à l'esprit. -- A popup can be opened by the `open(url, name, params)` call. It returns the reference to the newly opened window. -- Browsers block `open` calls from the code outside of user actions. Usually a notification appears, so that a user may allow them. -- Browsers open a new tab by default, but if sizes are provided, then it'll be a popup window. -- The popup may access the opener window using the `window.opener` property. -- The main window and the popup can freely read and modify each other if they have the same origin. Otherwise, they can change location of each other and [exchange messages](info:cross-window-communication). +- Une pop-up peut être ouvert par l'appel `open(url, nom, params)`. Il renvoie la référence à la fenêtre nouvellement ouverte. +- Les navigateurs bloquent les appels `open` du code en dehors des actions de l'utilisateur. Habituellement, une notification apparaît, afin que l'utilisateur puisse les autoriser. +- Les navigateurs ouvrent un nouvel onglet par défaut, mais si les tailles sont précisées, il s'agira d'une fenêtre contextuelle. +- La pop-up peut accéder à la fenêtre d'ouverture en utilisant la propriété `window.opener`. +- La fenêtre principale et le popup peuvent se lire et se modifier librement s'ils ont la même origine. Dans le cas contraire, ils peuvent changer de localisation et [échanger des messages](info:cross-window-communication). -To close the popup: use `close()` call. Also the user may close them (just like any other windows). The `window.closed` is `true` after that. +Pour ferme une pop-up: utilisez l'appel `close()`. L'utilisateur peut également les fermer (comme toutes les autres fenêtres). Le `window.closed` est `true` après ça. -- Methods `focus()` and `blur()` allow to focus/unfocus a window. But they don't work all the time. -- Events `focus` and `blur` allow to track switching in and out of the window. But please note that a window may still be visible even in the background state, after `blur`. +- Les méthodes `focus()` et `blur()` permettent de faire/défaire le focus sur une fenêtre. Mais elles ne fonctionnent pas tout le temps. +- Les évènements `focus` et `blur` permettent de suivre les manœuvres d'entrée et de sortie de la fenêtre. Mais veuillez noter qu'une fenêtre peut être encore visible même en arrière-plan, après le `blur`. pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.

Alternative Proxies: