В этой статье представлено подробное объяснение html5 postMessage для решения проблемы междоменной связи, и подробности описаны ниже:
визуализации
анализ пост-сообщений HTML5 предоставляет новый механизм PostMessage для обеспечения безопасной связи между источниками. СинтаксисotherWindow.postMessage(message, targetOrigin, [transfer]);
OtherWindow: ссылка на другие окна, например свойство contentWindow IFRAME, выполнение, объект окна, возвращаемый window.open message: данные, которые будут отправлены в другие окна. targetOrigin: используйте свойство origin, чтобы указать, какие окна могут быть отправлены. получать события сообщения, его значением может быть символ * (обозначающий неограниченное количество) или URL-адрес передачи: строка передаваемых объектов, передаваемых одновременно с сообщением. Право собственности на эти объекты будет передано получателю сообщения. После отправки право собственности больше не сохраняется. element.addEventListener(event,fn,useCaption); Событие события с тремя параметрами, такое как функция обратного вызова click mouseenter, mouseleave useCaption, используется для описания того, всплывает ли оно или захватывается. Значение по умолчанию — false, что означает доставку пузырьков. Если значение истинно, оно фиксируется и передается. Метод реализации
Основной интерфейс main.html
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, Initial-scale=1.0> <meta http-equiv=X-UA -Compatible content=ie=edge> <title>Междоменный доступ к данным</title> <script type=text/javascript> window.addEventListener('message',function(e){ console.log(e--->,e); const data = e.data; document.getElementById('main1').style.backgroundColor=e.data; },false) </script></head><body> <div id=main1 style=width:200px;height:200px;margin:100px;border:solid 1px #000;> Я основной интерфейс, ожидающий доставки iframe</div> <div style=margin:100px;> iframe < iframe src= http://localhost:3000/iframe.html ширина=800px высота=300px >/iframe> </div></body></html>интерфейс iframe
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, Initial-scale=1.0> <meta http-equiv=X-UA -Compatible content=ie=edge> <title>Document</title> <style type=text/css> html,body { height:100% Margin:0px; } </style></head> <body style=height:100%;> <div id=frame style=height:200px; width:200px;background-color:rgb(204, 204, 0) onclick=changeColor( )> Нажмите, чтобы изменить цвет</div> <script type=text/javascript> functionchangeColor(){ varframe = document.getElementById('frame'); var color=frame.style.backgroundColor; if(color=='rgb(204, 102, 0)'){color='rgb(204, 204, 0)'; }else{color='rgb(204,102,0) )'; } console.log(frame====>,frame); console.log(color,color);frame.style.backgroundColor=color; window.parent.postMessage(color,'*'); } </script> </body></html>Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.