diff options
Diffstat (limited to 'files/fr/web/api/window/message_event/index.md')
-rw-r--r-- | files/fr/web/api/window/message_event/index.md | 107 |
1 files changed, 54 insertions, 53 deletions
diff --git a/files/fr/web/api/window/message_event/index.md b/files/fr/web/api/window/message_event/index.md index 7122fbb2d9..f4e019bd9b 100644 --- a/files/fr/web/api/window/message_event/index.md +++ b/files/fr/web/api/window/message_event/index.md @@ -6,77 +6,78 @@ tags: - Window translation_of: Web/API/Window/message_event --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>L'événement <code>message</code> est déclenché sur un objet {{domxref('Window')}} lorsque la fenêtre reçoit un message, par exemple d'un appel a <code><a href="/en-US/docs/Web/API/Window/postMessage">Window.postMessage()</a></code> depuis un autre contexte de navigation.</p> +L'événement `message` est déclenché sur un objet {{domxref('Window')}} lorsque la fenêtre reçoit un message, par exemple d'un appel a [`Window.postMessage()`](/en-US/docs/Web/API/Window/postMessage) depuis un autre contexte de navigation. <table class="properties"> - <tbody> - <tr> - <th scope="row">Bulles</th> - <td>Non</td> - </tr> - <tr> - <th scope="row">Annulable</th> - <td>Non</td> - </tr> - <tr> - <th scope="row">Interface</th> - <td>{{domxref("MessageEvent")}}</td> - </tr> - <tr> - <th scope="row">Propriété de gestionnaire d'événements</th> - <td><code><a href="/en-US/docs/Web/API/WindowEventHandlers/onmessage">onmessage</a></code></td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Bulles</th> + <td>Non</td> + </tr> + <tr> + <th scope="row">Annulable</th> + <td>Non</td> + </tr> + <tr> + <th scope="row">Interface</th> + <td>{{domxref("MessageEvent")}}</td> + </tr> + <tr> + <th scope="row">Propriété de gestionnaire d'événements</th> + <td> + <code + ><a href="/en-US/docs/Web/API/WindowEventHandlers/onmessage" + >onmessage</a + ></code + > + </td> + </tr> + </tbody> </table> -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Supposons qu'un script envoie un message à un contexte de navigation différent, tel qu'un autre <code><a href="/en-US/docs/Web/HTML/Element/iframe"><iframe></a></code>, en utilisant un code comme celui-ci:</p> +Supposons qu'un script envoie un message à un contexte de navigation différent, tel qu'un autre [`<iframe>`](/en-US/docs/Web/HTML/Element/iframe), en utilisant un code comme celui-ci: -<pre class="brush: js">const targetFrame = window.top.frames[1]; +```js +const targetFrame = window.top.frames[1]; const targetOrigin = 'https://exemple.org'; const windowMessageButton = document.querySelector('#window-message'); -windowMessageButton.addEventListener('click', () => { +windowMessageButton.addEventListener('click', () => { targetFrame.postMessage('bonjour', targetOrigin); -});</pre> +}); +``` -<p>Le récepteur peut écouter le message en utilisant <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> avec un code comme celui-ci:</p> +Le récepteur peut écouter le message en utilisant [`addEventListener()`](/en-US/docs/Web/API/EventTarget/addEventListener) avec un code comme celui-ci: -<pre class="brush: js">window.addEventListener('message', (event) => { +```js +window.addEventListener('message', (event) => { console.log(`Message reçu: ${event.data}`); -});</pre> +}); +``` -<p>Alternativement l'écouteur peut utiliser la propriété du gestionnaire d'événements <code><a href="/en-US/docs/Web/API/WindowEventHandlers/onmessage">onmessage</a></code>:</p> +Alternativement l'écouteur peut utiliser la propriété du gestionnaire d'événements [`onmessage`](/en-US/docs/Web/API/WindowEventHandlers/onmessage): -<pre class="brush: js">window.onmessage = (event) => { +```js +window.onmessage = (event) => { console.log(`Message reçu: ${event.data}`); -};</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', 'indices.html#event-message')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - </tr> - </tbody> -</table> +}; +``` + +## Spécifications + +| Spécification | Statut | +| ---------------------------------------------------------------------------- | -------------------------------- | +| {{SpecName('HTML WHATWG', 'indices.html#event-message')}} | {{Spec2('HTML WHATWG')}} | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Window.message_event")}}</p> +{{Compat("api.Window.message_event")}} -<h2 id="Voir_également">Voir également</h2> +## Voir également -<ul> - <li>Événements liés: <code><a href="/docs/Web/API/Window/messageerror_event">messageerror</a></code>.</li> - <li><code><a href="/en-US/docs/Web/API/Window/postMessage">Window.postMessage()</a></code>.</li> -</ul> +- Événements liés: [`messageerror`](/docs/Web/API/Window/messageerror_event). +- [`Window.postMessage()`](/en-US/docs/Web/API/Window/postMessage). |