aboutsummaryrefslogtreecommitdiff
path: root/files/fr/web/api/window/message_event/index.md
diff options
context:
space:
mode:
Diffstat (limited to 'files/fr/web/api/window/message_event/index.md')
-rw-r--r--files/fr/web/api/window/message_event/index.md82
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">&lt;iframe&gt;</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', () =&gt; {
+ 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) =&gt; {
+ 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) =&gt; {
+ 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>