Как отправить сообщение в iframe и обратно?

Question

window.top.postMessage('', '*');

iFrame.contentWindow.postMessage('', '*');

Answer 1

1.html

<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Айфрэйм с кнопкой, и сообщением для родителя</title>
</head>

<body>
  <script>
    //скрипт с сообщением, отправитель письма родителю
    function iframe_popup() {
      window.top.postMessage('Сообщение из 1.html', '*');
    }
  </script>

  <input type="button" onclick="iframe_popup()" value="Запрос из айфрейма">

  <script>
    //скрипт слушатель, получатель письма от родителя
    window.addEventListener('message', function(msg) {
      alert(msg.data); //Сообщение отправленно в 1.html
     
    });
  </script>

</body>

</html>

2.html

<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Страница со слушателем из айфрэма, и кнопкой с сообщением в айфрейм</title>
</head>

<body>
  <iframe id="iFrame" src="./1.html"></iframe>
  <script>
    //скрипт слушатель, получатель письма из айфрейма
    window.onmessage = function(event) {
        alert(event.data);
    };
  </script>

  <button id="postMessage">Запрос в айфрейм</button>
  <script>
    //скрипт с сообщением, отправитель письма в айфрейм
    var button = document.getElementById('postMessage');
    var iFrame = document.getElementById('iFrame');
    button.addEventListener('click', function() {
      iFrame.contentWindow.postMessage('Сообщение отправленно в 1.html', '*'); //В первом файле сработает алерт и покажет это сообщение
    });
  </script>

</body>

</html>

БЛОГ НА HUSL

Как отправить сообщение в iframe и обратно?

Ответы (1 шт):