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 | 82 |
1 files changed, 82 insertions, 0 deletions
diff --git a/files/fr/web/api/window/message_event/index.md b/files/fr/web/api/window/message_event/index.md new file mode 100644 index 0000000000..7122fbb2d9 --- /dev/null +++ b/files/fr/web/api/window/message_event/index.md @@ -0,0 +1,82 @@ +--- +title: 'Window: message event' +slug: Web/API/Window/message_event +tags: + - Evènement + - Window +translation_of: Web/API/Window/message_event +--- +<div>{{APIRef}}</div> + +<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> + +<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> +</table> + +<h2 id="Exemples">Exemples</h2> + +<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> + +<pre class="brush: js">const targetFrame = window.top.frames[1]; +const targetOrigin = 'https://exemple.org'; +const windowMessageButton = document.querySelector('#window-message'); + +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> + +<pre class="brush: 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> + +<pre class="brush: 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> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.Window.message_event")}}</p> + +<h2 id="Voir_également">Voir également</h2> + +<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> |