Главная страница>Учебник по веб-дизайну>Учебник по HTML

Для деталей

Автор：Eve Cole Время обновления：2025-03-09 16:48:01

В предыдущей статье рассказывается о гомологичной стратегии браузера, то есть предотвращение доступа к методам и атрибутам друг друга и объяснению решения задач поперечного достоинства гомологических стратегий: Агентство по подразделению. , JSONP, JSONP, Cors. Эта статья подробно объясняет HTML5 Window.postmessage.

Html5 window.postmessage api

Html5 window.postmessage -это безопасное API на основе событий.

Postmessage Отправить сообщение

Метод Postmessage вызывается в окне источника, которое необходимо отправить сообщение для отправки сообщения.

Исходное окно

Окно источника может быть глобальным объектом окна или следующим типом окна:

Iframe в окне документа:

 var iframe = document.getElementbyId ('my-iframe');

JavaScript Open Pop -Up окно:

 var win = window.open ();

Окно отца в окне текущего документа:

 var win = window.parent;

Откройте окно текущего документа:

 var win = window.opner ();

После поиска объекта исходного окна вы можете вызвать API Postmessage, чтобы отправить сообщение в целевое окно:

 `` Win.postmessage ('hello', 'ttp: //jhssdemo.duapp.com/'); `` `` `` `` `` ``)

Функция PostMessage получает два параметра: первое - это сообщение, которое будет отправлено, а второе - источник исходного окна.

ПРИМЕЧАНИЕ. Только когда источник целевого окна сопоставлен со значением параметра источника, передаваемом в функции PostMessage, сообщение может быть получено.

Получить сообщения Postmessage

Для получения сообщений из предыдущего окна источника через Postmessage вам нужно только зарегистрировать событие сообщения в целевом окне и связать функцию мониторинга события, чтобы получить сообщение в параметре функции.

 Window.onload = function () {var text = document.getelementbyid ('txt'); + e.origin); } if (window.addeventListener) {// зарегистрировать событие сообщения для окна и привязать windows function.addeventristener ('message', receivemsg, false);} else {window.at tachevent ('message', receivemsg) ;}};

Функция мониторинга событий сообщения получает параметр, экземпляр объекта события, который имеет три атрибута:

  1. Конкретное сообщение, отправленное данными
  2. Происхождение отправляет источник сообщения
  3. Цитата с окном источника отправляет окно сообщения
иллюстрировать

  1. Вы можете установить второй параметр функции Postmessage на*, и вы пропустите проверку источника сообщения при отправке сообщений Cross -domain.
  2. PostMessage может отправлять только информацию о строке.
Пример

Исходное окно

 <! # cccccc;} </style> </head> <body> <button id = btn> open </button> <button id = Отправить> Отправить </button> <!) -> <iframe src = http: // jhssdemo.duapp.com/demo/h5_postmessage/win.html id = otherwin> </iframe> <br/> <br/> "<input type = value = value = send to child.com id = sendmessage/> <cript> Window.onload = function () {var btn = document.getElementById ('btn'); Window через Window.open ('http: //jhssdemo.duapp .com/demo/h5_postmessage/win.html', 'opup'); // Отправить Data Document.getElementByID (otherwin) .contentWindow .postmersage (otherwin) d (сообщение). ;};

Целевое окно win.html

 <! ;} </style> </head> <body> <h1> Новое окно </h1> <div id = txt> </div> <script> window.onload = function () {var text = документ ('Txt'); (Norigin: + e.origin); Для события сообщения и привязанность функции мониторинга "
обзор

Благодаря изучению этой статьи я узнал об использовании API Postmessage для использования HTML5 для общения между окнами, и я также знаю, что его можно использовать для реализации междоменного общения; Такие, как IE7-, вы можете использовать его.

Приведенное выше содержимое этой статьи.

Связанные статьи