Когда мы кодируем, мы часто сталкиваемся со следующими междоменными ситуациями:
1. Вложение iframe внутри страницы и обмен сообщениями с помощью iframe
2. Передача сообщений между страницами и несколькими страницами.
В ответ на эти неприятные междоменные проблемы HTML5 специально запустил новую функцию postMessage (передачу сообщений между документами). При использовании postMessage вам необходимо передать два параметра: data и originUrl. Данные относятся к содержимому, которое необходимо передать, но некоторые браузеры могут обрабатывать только строковые параметры, поэтому мы обычно сериализуем данные, то есть JSON.stringify(), а originUrl относится к целевому URL-адресу и указанному окну.
Ниже приведен пример, думаю, его будет проще понять и написать каждому.
1. Вложенный iframe внутри страницы.
Родительская страница:
HTML:
<div id='parent'>hello word postMessage</div><iframe src=http://127.0.0.1:8082/index2.html id='child'></iframe>
js:
window.onload=function(){ window.frames[0].postMessage('postMessage','http://127.0.0.1:8082/index2.html')} window.addEventListener('message',function(e) { console.log(e) document.getElementById('parent').style.color=e.data})Подстраница:
HTML:
<div id='button' onclick='changeColor();' style=color:yellow>Принять информацию</div>
js:
window.addEventListener('message',function(e){ console.log(e) let color = document.getElementById('button').style.color window.parent.postMessage(color,'http://127.0.0.1 :8081/index.html')});functionchangeColor(){ let buttonColor = document.getElementById('button').style.color buttonColor='#f00' window.parent.postMessage(buttonColor,'http://127.0.0.1:8081/index.html')}Родительская страница передает сообщения в iframe через метод postMessage, а дочерняя страница прослушивает метод сообщения через window.addEventListener, чтобы получить значение, переданное родительской страницей. Как показано на рисунке ниже, данные — это значение, передаваемое родительской страницей.
Когда дочерняя страница передает сообщения родительской странице, она также передает сообщение через метод postMessage вместо передачи значения через window.parent.postMessage(data,url). Родительская страница также прослушивает событие сообщения при получении значения.
2. Передача сообщений между несколькими страницами
Родительская страница:
HTML:
<div id='parent' onclick=postMessage()>здравствуйте, слово postMessage</div>
js:
let родитель = document.getElementById('parent')function postMessage(){ let windowOpen=window.open('http://127.0.0.1:8082/index2.html','postMessage') setTimeout(function(){ windowOpen .postMessage('postMessageData','http://127.0.0.1:8082/index2.html') },1000) }Подстраница:
HTML:
<div id='button' onclick='changeColor();' style=color:#f00>Принять информацию</div>
js:
window.addEventListener('message',function(e){ console.log(e) });Родительская страница отправляет сообщение дочерней странице с просьбой открыть другую страницу через window.open, а затем передает ей значение. Следует отметить, что при использовании postMessage для передачи значений необходимо использовать setTimeout для задержки доставки сообщения, поскольку загрузка подстраницы не завершается сразу, а это означает, что событие прослушивания подстраницы еще не запущен, и значение передано в это время. Его невозможно получить.
Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.