JS властивість Event.message

Загальний опис

Подія message використовується для обміну повідомленнями між різними вікнами браузера або фреймами, зокрема для роботи з postMessage. Це дозволяє безпечно передавати дані між документами на різних сторінках або вкладках, навіть якщо вони розміщені на різних доменах.

Щоб відправити повідомлення, використовується метод window.postMessage(). Цей метод приймає два аргументи: самі дані для передачі і рядок з доменом, до якого адресується повідомлення. Отримане повідомлення обробляється за допомогою події message, яка запускається на отримуючому кінці.

Коли спрацьовує подія message, доступний об'єкт події, який містить кілька корисних властивостей:

data: містить дані, передані відправником.
origin: рядок, що вказує на походження сторінки, з якої надійшло повідомлення.
source: вказує на вікно або фрейм, що відправив повідомлення.

Важливо перевіряти властивість origin, щоб бути впевненим, що повідомлення надійшло з очікуваного джерела. Це запобігає потенційним атакам, оскільки postMessage може використовуватися для міждоменної взаємодії.

Ось приклад використання message для отримання даних:

window.addEventListener('message', function(event) {
  if (event.origin !== 'https://trusted-origin.com') {
    return; // ігнорування повідомлень від неперевірених джерел
  }
  console.log('Отримано повідомлення:', event.data);
});

У цьому прикладі повідомлення отримуються тільки з конкретного домену, що запобігає можливим проблемам безпеки.

Щоб надіслати повідомлення, код на іншій сторінці може виглядати так:

window.postMessage('Привіт!', 'https://trusted-origin.com');

Отже, message — це ефективний і безпечний спосіб обміну даними між різними вікнами чи фреймами в межах веб-застосунку.

Порада:	Подія `message` може бути корисною для взаємодії з iframe. Наприклад, ви можете відправити команду в iframe для того, щоб змінити контент або виконати якусь дію всередині нього, не перезавантажуючи сторінку.
Порада:	Під час роботи з `postMessage` корисно додавати перевірки на тип даних. Наприклад, перед обробкою повідомлення перевіряйте, чи є дані у форматі, який ви очікуєте, особливо якщо повідомлення можуть бути відправлені з різних частин вашої програми.
Порада:	Використовуйте метод `event.stopPropagation()` у випадку, коли не хочете, щоб подія `message` поширювалася на інші об'єкти або елементи на сторінці, які також можуть прослуховувати події повідомлень.

Синтаксис

window.addEventListener('message', function(event) {
  // Обробка повідомлення
});

Значення

Return

Переглядачі

Переглядач
	66	57	11.1	53	16

Переглядач
	66	66	57	11.3

Переглядач
	15.0.0	1.0

Приклади

Цей приклад демонструє, як подія message дозволяє головній сторінці та iframe обмінюватися повідомленнями, відправляючи та отримуючи їх для асинхронної взаємодії між вікнами.


  See the Pen <a href="https://codepen.io/css_in_ua/pen/BageJRv">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

Цей приклад демонструє простий обмін даними між двома вкладками браузера. Перша вкладка надсилає повідомлення, яке приймається і обробляється у другій вкладці.

// Відправник
window.postMessage('Привіт від вкладки 1!', '*');

// Одержувач
window.addEventListener('message', function(event) {
  console.log('Повідомлення з іншої вкладки:', event.data);
});

Цей приклад ілюструє, як за допомогою postMessage можна взаємодіяти з вмістом iframe. Головне вікно надсилає команду для оновлення контенту iframe, і відповідний код в iframe реагує на це повідомлення.

// Відправлення повідомлення з головного вікна
iframe.contentWindow.postMessage('Онови контент', 'https://trusted-origin.com');

// Обробка повідомлення всередині iframe
window.addEventListener('message', function(event) {
  if (event.origin === 'https://trusted-origin.com') {
    document.body.innerHTML = 'Контент оновлено!';
  }
});

JS довідник

JavaScript

Наповнення JS розділу