postMessage()

window.postMessage() - передача даних іншому вікну різних доменів.

Синтаксис:

otherWindow.postMessage( message , targetOrigin );

otherWindow - посилання на інше вікно. Наприклад властивість contentWindow в елементі iframe, window.open, ім'я або числовий індекс на window.frames.

message - дані , які будуть відправлені в інше вікно. Дані можуть бути будь якого типу, лише Internet Explorer підтримує рядок.

targetOrigin - веб-адреса вікна якому повині передатися дані. Так як через політику безпеки браузера не можливо взнати адресу вікна чи фрейму вказується даний параметр щоб бути впевненим що дані буду передані конкретному сайту. Рядок "*" вказує що дані можуть передаватися у вікно з будь якою адресою.

Опис:

postMessage() метод об'єкту window який дозволяє передавати дані вікну, фрейму іншого домену.

Internet Explorer у деяких версіях не підтримує передачу даних новоствореному вікну а лише фрейму.

Для підвищення безпеки передачі даних рекомендовано вказувати параметр targetOrigin. Якщо домен не співпадає то браузер не буде передавати дані.

Дані передаються за допомогою API браузера тому немає ніякої передачі даних через мережу.

У вікні яке отримує дані виникає подія onmessage( event );.

Якщо Ви не очікуєте , щоб отримувати повідомлення від інших сайтів, тоді НЕ додавайте обробники подій onmessage.

Якщо Ви очікуєте отримувати дані від конкретного сайту тоді перевіряйте eval.origin.

Приклад:

// обробник події для поточної сторінки window.onmessage=function(event){ alert(event.data); }; //отримуємо нове вікно var w=open('about:blank','test'); //обробник події onmesage для новоствореного вікна w.onmessage=function(m){ this.document.write('<p>origin: '+m.origin+'</p>'); this.document.write('<p>data: '+m.data+'</p>'); this.document.write('<p>source: '+m.source+'</p>'); //відправляємо відповідь m.source.postMessage('відповідь', '*'); } w.postMessage('test message', '*'); //отримуємо об'єкт window у iframe var w=document.getElementById("test_iframe").contentWindow; //обробник події onmesage w.onmessage=function(m){ this.document.write('<p>origin: '+m.origin+'</p>'); this.document.write('<p>data: '+m.data+'</p>'); this.document.write('<p>source: '+m.source+'</p>'); } w.postMessage('test message', '*');