Недавно я столкнулся с необходимостью на работе. Сценарий таков: страница h5 встроена в страницу ПК в качестве модуля предварительного просмотра. Пользователь может выполнять некоторые операции на странице ПК, а затем страница h5 вносит адаптивные изменения для достижения эффекта предварительного просмотра. .
Первое, что приходит на ум, — это встроить страницу h5 в веб-страницу компьютера с помощью iframe, а затем компьютер отправляет измененные данные в iframe с помощью метода postMessage. h5, встроенный в iframe, получает данные через addEventListener. , а затем вносит в данные оперативные изменения.
Вот краткое описание использования postMessage. API очень прост:
OtherWindow.postMessage(сообщение, targetOrigin, [перенос]);
otherWindow — это ссылка на целевое окно, которым в текущем сценарии является iframe.contentWindow;
message — это отправленное сообщение. До Gecko 6.0 сообщение должно быть строкой, но более поздние версии могут отправлять объект напрямую, без его сериализации;
targetOrigin представляет источник целевого окна, а его значение может быть строкой * (обозначающей неограниченный ресурс) или URI. Если при отправке сообщения какой-либо протокол, адрес хоста или порт целевого окна не соответствует значению, предоставленному targetOrigin, сообщение не будет отправлено, только если эти три значения полностью совпадают, сообщение будет отправлено; Для конфиденциальных данных очень важно установить начало целевого окна;
При вызове postMessage() событие сообщения отправляется в целевое окно. В этом интерфейсе есть событие сообщения, которое имеет несколько важных свойств:
1.data: Как следует из названия, это сообщение, передаваемое в
2.source: объект окна, отправляющий сообщение.
3.origin: источник окна сообщения (протокол + хост + номер порта)
Таким образом, мы можем получать междоменные сообщения, а также отправлять сообщения обратно аналогичным способом.
Необязательный параметр передачи — это строка передаваемых объектов, которые передаются вместе с сообщением. Право собственности на эти объекты будет передано получателю сообщения, и отправитель больше не будет сохранять право собственности.
Затем, когда iframe инициализируется, вы можете получить ссылку на iframe и отправить сообщение с помощью следующего кода:
// Обратите внимание, что это не ссылка на dom iframe, а ссылка на окно iframe const iframe = document.getElementById('myIFrame').contentWindow;iframe.postMessage('hello world', 'http:/ /вашхост.com');В iframe сообщение можно получить с помощью следующего кода.
window.addEventListener('сообщение', msgHandler, false);При получении вы можете фильтровать происхождение сообщения по мере необходимости, чтобы избежать XSS-атак, вызванных получением сообщений с незаконными доменными именами.
Наконец, для повторного использования кода отправка и получение сообщений инкапсулируются в класс и моделируется API типа сообщения, что очень удобно в использовании. Конкретный код выглядит следующим образом:
экспортировать класс Messager {constructor(win, targetOrigin) {this.win = win; this.targetOrigin = targetOrigin; this.actions = {}; window.addEventListener('message', this.handleMessageListener, false } handleMessageListener = event); => { if (!event.data || !event.data.type) { return } const type = event.data.type; (!this.actions[type]) { return console.warn(`${type}: отсутствует прослушиватель` } this.actions[type](event.data.value } on = (type, cb) = > { this.actions[type] = cb; return this; window.removeEventListener('message', this.handleMessageListener }});Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.