An example of implementing IFRAME cross-domain communication in JavaScript

As is well known, JavaScript can only access content that is under the same domain as the document containing it because of the security restrictions that front-end JavaScript makes across domain access. While the actual encoding we will encounter the use of IFRAME Cross-domain access, Ajax Cross-domain communication operations, such as how to break through the problem of cross-domain operation, this article will be combined with an example to explain the solution.

iframe Communication in different subdomains

How do I make JavaScript calls in different subdomains in the same primary domain? This problem is a good solution, For example, the existing primary domain 111cn.net and subdomain abc.111cn.net, in 111cn.net there is a page embedded in the IFRAME to the abc.111cn.net of a page, the IFRAME page needs to access the 111cn.net page of the JS function code, then the solution is: Two top of the page with document.domain information, such as:

<script type= "Text/javascript" >
Document.domain = "111cn.net";
</script>

This way, two pages become the same domain, so JavaScript can be invoked as normal under the same domain.
iframe full Cross-domain communication
IFrame Cross-domain Communication, you can use the URL after the parameter and coding, etc. to get the information returned under different fields, the application of this method can be online search of relevant knowledge. And this article I will introduce HTML5 PostMessage cross-domain communication function, combined with the example, The following is in the main domain 111cn.net page, we can send the message to the IFRAME under different domain name m.111cn.net under the page, note that is a completely different domain name, and in the m.111cn.net of the iframe embedded in the page can receive the message 111cn.net sent.
 
<div class= "Demo" >
    <input type= "text" id= "message" value= "Helloweba welcome you! "> <button onclick=" SendMessage () > Send data to child windows </button>
    <div id= "MSG" ></ Div>
    <br/>
    <iframe id= "IFR src=" http://m.111cn.net/demo/ Iframe.html "></iframe>
</div>

Window.postmessage is a secure way to achieve direct cross-domain communication, supported by most modern browsers. In the Receiving Information IFrame window, you need to set up an event handler function AddEventListener to receive messages sent over.

Function SendMessage () {
Sending data to a child window by postMessage
document.getElementById ("IFR"). Contentwindow.postmessage (
document.getElementById ("message"). Value,
"Http://m.111cn.net"
);
}

Window.addeventlistener (' message ', function (e) {
if (e.source!=window.parent) return;
document.getElementById ("msg"). Innerhtml+=e.data;
}, False);

The PostMessage (Data,origin) method takes two parameters, data: A string parameter that indicates the source of the target window, Origin: Http://m.111cn.net

For security reasons, using Window.postmessage, you must use the origin and source properties of the message to verify the identity of the sender, or you can create an XSS vulnerability. Window.postmessage is very powerful across domains and is simple to use and highly efficient.