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 для того, щоб змінити контент або виконати якусь дію всередині нього, не перезавантажуючи сторінку.

автор: Bond правити

Порада

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

автор: Bond правити

Порада

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

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

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

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

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

Підтримка: мобільні переглядачі

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

Підтримка: серверні переглядачі

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

Приклади

+ запропонувати свій приклад у пісочниці

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

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

// Слухач повідомлень; між вікнами принцип той самий
window.addEventListener('message', function (event) {
    console.log('Отримано повідомлення:', event.data);
});

// Відправлення (другий аргумент — очікуване походження одержувача)
window.postMessage('Онови контент', '*');