W3Docs

Apparence

Français

Communication inter-fenêtres en JavaScript ​

La communication inter-fenêtres en JavaScript est essentielle pour les développeurs web qui doivent gérer les échanges de données entre différents contextes de navigation. Ce guide complet explore les subtilités de la communication inter-fenêtres, en fournissant des explications détaillées et des exemples pratiques. Notre objectif est de vous doter des connaissances nécessaires pour maîtriser efficacement cette fonctionnalité avancée de JavaScript.

Comprendre la communication inter-fenêtres ​

La communication inter-fenêtres désigne le processus d'échange de données entre différentes fenêtres ou cadres (frames). Cela peut inclure la communication entre une fenêtre parente et une fenêtre enfant (popup) ou entre plusieurs cadres au sein d'une même fenêtre parente.

Scénarios nécessitant une communication inter-fenêtres ​

  1. Fenêtres popup : Lorsqu'une nouvelle fenêtre est ouverte via window.open(), une communication entre la fenêtre parente et la fenêtre enfant devient nécessaire.
  2. Communication avec les iframes : Souvent, les applications web utilisent des iframes pour intégrer du contenu. Une communication efficace entre la fenêtre parente et les iframes est cruciale.
  3. Onglets : Parfois, un échange de données entre différents onglets est requis.

Méthodes de communication inter-fenêtres ​

Utilisation de window.postMessage() ​

La méthode window.postMessage() offre un moyen d'envoyer des données de manière sécurisée entre différentes fenêtres ou cadres.

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Cross-Window Communication</title>
  <style>
    #childIframe, #childPopup {
      width: 100%;
      height: 200px;
      border: 1px solid black;
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <h1>Cross-Window Communication Examples</h1>

  <!-- Button to Open Popup -->
  <button id="openPopup">Open Popup</button>
  <div id="parentPopupDisplay"></div>

  <!-- Iframe -->
  <iframe id="childIframe" srcdoc="
    <!DOCTYPE html>
    <html lang='en'>
    <head>
      <meta charset='UTF-8' />
      <title>Child Iframe</title>
    </head>
    <body>
      <div id='childIframeDisplay'></div>
      <script>
        window.addEventListener('message', (event) => {
          // Note: For cross-origin contexts, replace window.location.origin with the hardcoded parent origin.
          if (event.origin !== window.location.origin) return;
          document.getElementById('childIframeDisplay').innerText = 'Message from parent: ' + event.data;
          event.source.postMessage('Hello, Parent Window!', event.origin);
        });
      </script>
    </body>
    </html>
  "></iframe>
  <div id="iframeDisplay"></div>

  <!-- Scripts for Parent Window -->
  <script>
    // Handle Popup Communication
    document.getElementById('openPopup').addEventListener('click', () => {
      const popup = window.open('', 'popupWindow', 'width=600,height=400');
      popup.document.write(`
        <!DOCTYPE html>
        <html lang='en'>
        <head>
          <meta charset='UTF-8' />
          <title>Popup Window</title>
        </head>
        <body>
          <div id='popupDisplay'></div>
          <script>
            window.addEventListener('message', (event) => {
              // Note: For cross-origin contexts, replace window.location.origin with the hardcoded parent origin.
              if (event.origin !== window.location.origin) return;
              document.getElementById('popupDisplay').innerText = 'Message from parent: ' + event.data;
              event.source.postMessage('Hello, Parent Window!', event.origin);
            });
          <\/script>
        </body>
        </html>
      `);
      setTimeout(() => {
        // For cross-origin, replace '*' with the exact target origin (e.g., 'https://example.com')
        popup.postMessage('Hello from parent!', '*');
      }, 1000);
    });

    // Handle Iframe Communication
    const iframe = document.getElementById('childIframe');

    iframe.onload = () => {
      iframe.contentWindow.postMessage('Hello from parent window!', '*');
    };

    window.addEventListener('message', (event) => {
      if (event.origin !== window.location.origin) return;
      if (event.source === iframe.contentWindow) {
        document.getElementById('iframeDisplay').innerText = 'Message from iframe: ' + event.data;
      } else {
        document.getElementById('parentPopupDisplay').innerText = 'Message from popup: ' + event.data;
      }
    });
  </script>
</body>
</html>
Try it Yourself »

Dans cet exemple combiné, la fenêtre parente ouvre une popup et intègre un iframe. La popup et l'iframe peuvent toutes deux communiquer avec la fenêtre parente en utilisant postMessage(). Les messages sont affichés dans des éléments div respectifs pour une visibilité claire.

note

Bien que document.write() fonctionne pour des démonstrations simples, les bonnes pratiques modernes recommandent d'utiliser DOMParser ou des URL Blob pour injecter du contenu dans les popups en toute sécurité.

Accès aux références de fenêtre ​

Lorsque vous ouvrez une nouvelle fenêtre, vous obtenez une référence vers celle-ci qui peut être utilisée pour la manipuler ou communiquer avec elle.

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Direct Manipulation Example</title>
  <style>
    #childIframe {
      width: 100%;
      height: 200px;
      border: 1px solid black;
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <h1>Direct Manipulation Example</h1>

  <!-- Button to Open Popup -->
  <button id="openChild">Open Child Window</button>
  <div id="parentChildDisplay"></div>

  <!-- Iframe -->
  <iframe id="childIframe" srcdoc="
    <!DOCTYPE html>
    <html lang='en'>
    <head>
      <meta charset='UTF-8' />
      <title>Child Iframe</title>
    </head>
    <body>
      <div id='childIframeContent'>Initial Content</div>
    </body>
    </html>
  "></iframe>

  <!-- Scripts for Parent Window -->
  <script>
    document.getElementById('openChild').addEventListener('click', () => {
      const childWindow = window.open('', 'childWindow', 'width=600,height=400');
      childWindow.document.write(`
        <!DOCTYPE html>
        <html lang='en'>
        <head>
          <meta charset='UTF-8' />
          <title>Child Window</title>
        </head>
        <body>
          <div id='childContent'>Initial Content</div>
        </body>
        </html>
      `);
      // Ensure the content is updated after the window has fully loaded
      setTimeout(() => {
        childWindow.document.body.innerHTML += '<p>Message from parent window</p>';
      }, 1000); // Adjust the timeout duration as necessary
    });

    const iframe = document.getElementById('childIframe');

    iframe.onload = () => {
      const iframeDoc = iframe.contentWindow.document;
      iframeDoc.getElementById('childIframeContent').innerText += ' - Updated by Parent Window';
    };
  </script>
</body>
</html>
Try it Yourself »

Dans cet exemple, la fenêtre parente ouvre une fenêtre enfant et modifie directement son contenu une fois chargé. De plus, elle met à jour le contenu d'un iframe intégré.

WARNING

La manipulation directe du DOM via contentWindow.document ou window.opener est restreinte par la politique Same-Origin (SOP) pour les contextes inter-origines. Pour une communication sécurisée et fiable, privilégiez toujours postMessage(). Pour les popups du même origine, window.opener peut être utilisé comme alternative pour accéder directement à la fenêtre parente.

note

Lors de l'utilisation de srcdoc, le contenu de l'iframe se charge de manière asynchrone. Le gestionnaire onload garantit que le DOM est prêt, mais pour des scénarios complexes, envisagez de déclencher la communication via un événement DOMContentLoaded envoyé depuis l'intérieur de l'iframe.

Utilisation de Local Storage et Session Storage ​

Local Storage et Session Storage offrent une méthode alternative pour la communication inter-fenêtres. Ces deux options de stockage sont limitées à l'origine, permettant à différentes fenêtres de la même origine d'accéder aux données partagées.

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Local Storage Example</title>
</head>
<body>
  <h1>Local Storage Example</h1>
  <button id="storeData">Store Data</button>
  <button id="retrieveData">Retrieve Data</button>
  <div id="storageDisplay"></div>

  <script>
    // Listen for changes triggered by other windows/tabs
    window.addEventListener('storage', (event) => {
      if (event.key === 'sharedData') {
        document.getElementById('storageDisplay').innerText = 'Updated Data: ' + event.newValue;
      }
    });

    document.getElementById('storeData').addEventListener('click', () => {
      localStorage.setItem('sharedData', 'This is shared data');
    });

    document.getElementById('retrieveData').addEventListener('click', () => {
      const data = localStorage.getItem('sharedData');
      document.getElementById('storageDisplay').innerText = 'Stored Data: ' + data;
    });
  </script>
</body>
</html>
Try it Yourself »

Dans cet exemple, la fenêtre parente stocke des données dans localStorage et les récupère lors des clics sur les boutons. Pour activer la synchronisation inter-fenêtres, un écouteur d'événement storage est ajouté. Notez que l'événement storage ne se déclenche que dans les autres contextes de navigation, et non dans celui qui a provoqué le changement.

API Broadcast Channel ​

L'API Broadcast Channel permet une communication simple entre les contextes de navigation (fenêtres, onglets, iframes) qui partagent la même origine.

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Broadcast Channel Example</title>
</head>
<body>
  <h1>Broadcast Channel Example</h1>
  <button id="sendMessage">Send Message</button>
  <div id="broadcastDisplay"></div>

  <script>
    const channel = new BroadcastChannel('example_channel');

    channel.onmessage = (event) => {
      document.getElementById('broadcastDisplay').innerText = 'Broadcast message received: ' + event.data;
    };

    document.getElementById('sendMessage').addEventListener('click', () => {
      channel.postMessage('Hello from another context!');
    });
  </script>
</body>
</html>
Try it Yourself »

Dans cet exemple, un Broadcast Channel est créé et un message est envoyé lors du clic sur le bouton. Le message est reçu et affiché dans un élément div.

Pour tester correctement cet exemple :

  1. Cliquez deux fois sur le bouton « Essayez vous-même » pour avoir la page d'exemple dans deux onglets différents.
  2. Ensuite, cliquez sur le bouton « Envoyer le message » dans l'un des onglets/fenêtres.
  3. Vous devriez voir le message apparaître dans l'autre onglet/fenêtre.

L'API BroadcastChannel est conçue pour la communication inter-onglets, donc le message sera envoyé d'un onglet/fenêtre vers tous les autres ouverts sur la même origine (le même fichier HTML dans ce cas).

WARNING

Lors de l'envoi de données entre des fenêtres, utilisez JSON pour sérialiser les données, afin de garantir la compatibilité et la facilité d'analyse.

javascript
const message = { type: 'greeting', content: 'Hello, Child Window!' };
childWindow.postMessage(JSON.stringify(message), '*');

WARNING

Assurez-vous que votre logique de communication inter-fenêtres gère les scénarios où la fenêtre cible n'est pas accessible ou est fermée.

javascript
try {
  childWindow.postMessage('Hello, Child Window!', '*');
} catch (e) {
  console.error('Failed to send message:', e);
}

Conclusion ​

La communication inter-fenêtres en JavaScript est une fonctionnalité puissante qui, lorsqu'elle est utilisée correctement, peut considérablement améliorer l'interactivité et l'expérience utilisateur des applications web. En utilisant des méthodes telles que window.postMessage(), le stockage local et l'API Broadcast Channel, les développeurs peuvent gérer efficacement les échanges de données entre différentes fenêtres, onglets et cadres. Suivez les bonnes pratiques pour garantir une communication sécurisée et robuste, et utilisez les exemples fournis pour intégrer ces techniques dans vos projets.

Pratique ​

Qu'est-ce qui est vrai concernant la communication inter-fenêtres en JavaScript ?

Trouvez-vous cela utile?

Aperçu dual-run — comparez avec les routes Symfony en production.