<header>
  <h2 class="title">Подія message</h2>
  <p class="description">Використовується для обміну повідомленнями між головною сторінкою та iframe</p>
</header>
<main>
  <div class="result">
    <!-- Форма для надсилання повідомлення до iframe -->
    <input type="text" id="messageInput" placeholder="Введіть повідомлення" />
    <button id="sendMessageButton">Надіслати повідомлення</button>
    
    <!-- Поле для відображення отриманих повідомлень -->
    <p id="messageOutput">Відповідь від iframe буде тут.</p>
    
    <!-- Вбудований iframe -->
    <iframe id="receiverFrame" srcdoc="
      <html>
      <body>
        <p id='receivedMessage'>Очікую на повідомлення...</p>
        <script>
          window.addEventListener('message', function(event) {
            // Відображення отриманого повідомлення
            document.getElementById('receivedMessage').innerText = 'Отримано повідомлення: ' + event.data;
            // Відправка підтвердження назад до головної сторінки
            event.source.postMessage('Повідомлення отримано!', event.origin);
          });
        </script>
      </body>
      </html>
    " width="100%" height="100" style="border:1px solid #ccc;"></iframe>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  min-height: 150px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  position: relative;
}

input#messageInput, button#sendMessageButton {
  display: inline-block;
  margin-top: 10px;
  padding: 8px;
}

// Отримуємо посилання на елементи
const messageInput = document.getElementById("messageInput");
const sendMessageButton = document.getElementById("sendMessageButton");
const messageOutput = document.getElementById("messageOutput");
const receiverFrame = document.getElementById("receiverFrame");

// Відправка повідомлення в iframe по кліку на кнопку
sendMessageButton.addEventListener("click", function() {
  const message = messageInput.value;
  receiverFrame.contentWindow.postMessage(message, "*"); // Відправляємо повідомлення в iframe
});

// Обробник події message для отримання відповіді від iframe
window.addEventListener("message", function(event) {
  // Відображаємо відповідь від iframe у головній сторінці
  messageOutput.innerText = "Відповідь від iframe: " + event.data;
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.