This article introduces the detailed explanation of html5 postMessage to solve the problem of cross-domain communication and shares it with everyone. The details are as follows:
renderings
postmessage parsing HTML5 provides a new mechanism PostMessage to achieve secure cross-origin communication. Syntax otherWindow.postMessage(message, targetOrigin, [transfer]);
otherWindow: a reference to other windows, such as the contentWindow property of IFRAME, execution, window object returned by window.open. message: data to be sent to other windows. targetOrigin: Use the origin property of the window to specify which windows can receive message events , its value can be the character * (indicating unlimited) or a URL transfer: is a string of Transferable objects passed at the same time as the message. The ownership of these objects will be transferred to the recipient of the message. Once it is sent, the ownership will no longer be retained. element.addEventListener(event,fn,useCaption); The three parameter event event such as click mouseenter mouseleave callback function useCaption is used to describe whether it is bubbling or capturing. The default value is false, which means bubble delivery. When the value is true, it is captured and passed. Implementation method
Main interface 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>Cross-domain data access</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;> I am the main interface, waiting to receive the delivery of iframe</div> <div style=margin:100px;> iframe <iframe src= http://localhost:3000/iframe.html width=800px height=300px ></iframe> </div></body></html>iframe interface
<!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( )> Click to change color</div> <script type=text/javascript> function changeColor(){ var frame = 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>The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.