» » iframe cross-domain communication

 

iframe cross-domain communication

Author: bamboo06 on 1-01-2016, 23:52, views: 2082

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.

Category: Javascript / HTML5

Dear visitor, you are browsing our website as Guest.
We strongly recommend you to register and login to view hidden contents.
<
  • 0 Comments
  • 0 Articles
6 October 2017 00:03

Thomas

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Class post here from the writer. Got some good information from this for my essaysontime project. Would love to get more informative posts like this.

<
  • 0 Comments
  • 0 Articles
18 October 2017 02:26

carl

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Quality information shared on this site with us again. As someone who just put up his VR Headsets For Sale, I really enjoyed reading this post here.

<
  • 0 Comments
  • 0 Articles
5 November 2017 01:06

david

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Totally awesome posting! Loads of valuable data and motivation, both of which we all need!Relay welcome your work. visit

<
  • 0 Comments
  • 0 Articles
19 November 2017 03:25

Robinjack

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
A debt of gratitude is in order for this extraordinary post, i discover it extremely intriguing and exceptionally well thoroughly considered and set up together. I anticipate perusing your work later on. beirut escorts

<
  • 0 Comments
  • 0 Articles
6 December 2017 17:43

dfgfgsdsf

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
The birth of replica rolex the first quartz watch was around the 1960s. The beginning of uk replica watches the birth of quartz watch, really shocked the watch market. Mechanical watch suffered a similar "catastrophe" catastrophe rolex replica watches, but now we can see in replica watches uk the watch market, the proportion of mechanical watches did not decrease.

Information
Comment on the news site is possible only within (days) days from the date of publication.