Общение с iframe по тому же происхождению - PullRequest
Новая
       25

Общение с iframe по тому же происхождению

0 голосов
/ 27 января 2019

В моем приложении (угловой 6) требуется связь с iframe в том же источнике, есть ли лучший способ связи с iframe в том же источнике, кроме использования глобального объекта window.Если какая-то обертка или через RxJS.

PS: Я также проверил пример хранилища, я хочу узнать ваше мнение, если можно добиться того же лучшего, не загрязняя объект окна.

Спасибо

1 Ответ

0 голосов
/ 27 января 2019

Вы можете использовать postMessage для связи между двумя <iframe>.

Событие

A message запускается при каждом получении сообщения. Так что можно построить наблюдаемое с fromEvent , если вы хотите это сделать.

Вот краткий пример:

У меня есть ping.html, который включает pong.html в качестве фрейма. (Оба размещены на http://localhost:8000)

  1. ping.html отправляет первое сообщение на pong.html
  2. Когда pong.html получает сообщение, отображается «?» и отправляет ответ обратно
  3. Когда ping.html получает сообщение, отображается «?» и отправляет ответ обратно
  4. И так далее ...

Вот ping.html: 

<html>
  <head>
    <meta charset="utf8">
  </head>
  <body>
    <div id="msg_from_pong"></div>
    <iframe id="pong" src="pong.html" style="width:100%;border-style:none"></iframe>

    <script>

      // Wait until the pong iframe is loaded
      document.querySelector('#pong').addEventListener('load', ({target}) => {
        target.contentWindow.postMessage('initial ping', 'http://localhost:8000');
      });

      // Listen to message from the pong iframe
      window.addEventListener('message', ({data, source, origin}) => {
        if (data !== 'pong') {
          return;
        }

        document.querySelector('#msg_from_pong')
          .appendChild(document.createTextNode('?'));

        setTimeout(() => {
          source.postMessage('ping', origin);
        }, 300);
      });

    </script>
  </body>
</html>

А вот и pong.html: 

<html>
  <body>
    <div id="msg_from_ping"></div>
    <script>
      window.addEventListener('message', ({data, source, origin}) => {

        document.querySelector('#msg_from_ping')
          .appendChild(document.createTextNode('?'));

        setTimeout(() => {
          source.postMessage('pong', origin);
        }, 300);
      });
    </script>
  </body>
</html>

А вот и все в действии:

enter image description here

...