Shulou(Shulou.com)06/02 Report--

This article mainly introduces "how to solve the problem of cross-domain communication in html5". In the daily operation, I believe that many people have doubts about how to solve the problem of cross-domain communication in html5. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubt of "how to solve the problem of cross-domain communication in html5". Next, please follow the editor to study!

Postmessage parsing HTML5 provides a new mechanism PostMessage to realize secure cross-source communication. Syntax otherWindow.postMessage (message, targetOrigin, [transfer])

OtherWindow: a reference to other windows, such as the contentWindow property of IFRAME, execution, the 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. The value can be the character "*" (meaning unlimited) or a URL transfer: a string of Transferable objects passed at the same time as message. Ownership of these objects will be transferred to the recipient of the message, while sending and releasing will no longer retain ownership. Element.addEventListener (event,fn,useCaption); three-parameter event events such as the click mouseenter mouseleave callback function useCaption are used to describe whether bubbling or capture. The default value is false, that is, bubble transfer. When the value is true, it is captured and passed. Mode of realization

Main interface main.html

Cross-domain data access window.addEventListener ('message',function (e) {console.log ("eMurray->", e); const data = e.data; document.getElementById (' main1'). Style.backgroundColor=e.data;}, false) I am the main interface, waiting to receive the delivery iframe of iframe

Iframe interface

Document html,body {height:100%; margin:0px;} ", frame); console.log (" color ", color); frame.style.backgroundColor=color; window.parent.postMessage (color,'*') At this point, the study on "how to solve the problem of cross-domain communication in html5" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.