GOOCODE - Find your code/scripts

5 As we all know, since the front end javascript to access cross-domain security restrictions made, javascript can only be accessed with the content of the document that contains it in the same domain. And when we encounter the actual code using iframe cross-domain access, Ajax cross-border communications and other operations, this time the problem of how to break cross-border operations, with examples of this article will tell solutions.


Different sub-domain communication iframe
At the same how different subdomains main domain javascript calls? This problem easy to solve, such as the existing primary domain and subdomains helloweba.com abc.helloweba.com, there is a page in helloweba.com embedded iframe pointing to a certain page abc.helloweba.com under, iframe page needs access helloweba. com this js the function code of the page, then the solution is: at the top of the two pages plus document.domain information, such as:

<script type="text/javascript"> 
    document.domain = "goocode.net"; 
</script>  

As a result, it becomes two pages with the domain, it can be under the same domain as normal javascript call.

Iframe fully cross-domain communication
iframe cross-domain communication, you can add parameters and coding url get through the back under a different domain information returned, about the method of application we can search the Internet under the relevant knowledge. And this article I will introduce the HTML5 postMessage cross-domain communication, with examples, the following are the main fields in helloweba.com page, we can send a message to the iframe on that page under a different name demo.helloweba.net page, note that the domain name is completely different, and in being embedded iframe page demo.helloweba.net domain can receive helloweba.com message sent.

<div class="demo"> 
    <input type="text" id="message" value="Welcome to goocode.net"> <button onclick="sendMessage()">Post data to child window</button> 
    <div id="msg"></div> 
    <br/> 
    <iframe id="ifr" src="http://demo.goocode.net/demo/iframe.html"></iframe> 
</div> 

window.postMessage is a safe method of direct cross-domain communication by most modern browsers support. Iframe window in the received information, you need to set up an event handler to receive addEventListener message sent.

function sendMessage(){  
     // post data to child window by postMessage 
     document.getElementById("ifr").contentWindow.postMessage(  
         document.getElementById("message").value,  
        "http://demo.goocode.net" 
       );  
   }  
    
window.addEventListener('message', function(e){ 
    if(e.source!=window.parent) return; 
    document.getElementById("msg").innerHTML+=e.data; 
}, false);

postMessage (data, origin) method accepts two parameters, data: to pass data, origin: a string parameter that specifies the target window of sources, such as: http: //demo.goocode.net
For security reasons, use window.postMessage, will need to use the message origin and source properties to verify the sender's identity, otherwise it will cause XSS vulnerabilities. window.postMessage cross-domain function is very powerful, and easy to use, high efficiency.