We know parent.postMessage() allows an iframe to communicate with its parent window.We know the user’s age and height needs to be sent from the iframe to its parent window when the form is submitted (when the user clicks the “Send” button).There are some examples on the Internet showing how to create cross-domain communication and they use, but they don’t explain why works.
It will save you a bunch of headaches when you’re trying to figure out why isn’t working for you. (note continued) works if the iframe shares the same domain as its parent. Uncaught DOMException: Blocked a frame with origin “” from accessing a cross-origin frame. In Section 4 below, you can see what happens when this argument is not specified or if this argument is specified incorrectly.īelow is a Gist of example code showing how parent.postMessage() can be called: Providing this argument lets the parent window know that its child iframe knows (1) who its parent is and (2) the origin of its parent. Note: This argument is the reason why the cross-domain communication will work in this case.
The parent window’s protocol and domain name.It takes at least two arguments to work properly: In this case, we want an iframe ( ) to send data to its parent window ( ). Parent.postMessage() is the function that allows the sending of messages, or data, from one window to another window. I’ll explain below how to make the cross-domain communication work between these different domains and why it works. This doesn’t mean “hacky” code will need to be in place though. This means the same-origin policy will be violated. In this case, the parent window’s domain ( ) is on a different domain than the iframe’s domain ( ). Something You Should Know Before enabling cross-domain communication between a parent window and a child iframe, you must know that it will only work if the same-origin policy isn’t being violated. If it doesn’t exist, then you’ll have to use attachEvent. Note: If you’re supporting IE versions before IE 9, then you’ll have to check if addEventListener exists. window.addEventListener() in the parent window.You do some Googling and find some resources on enabling cross-domain communication, but you’re not really understanding what’s being explained in those resources. You’re now thinking about how to create the cross-domain communication, but you’re not sure where to start. What I want to do is refresh the parent page when the iframe gets loaded.Section 2 - Enable Cross-Domain CommunicationĬoding the markup was pretty straightforward. The links in the parent control the page that gets loaded in the iframe. I’ve got a parent page and an iframe inside that page.
0 kommentar(er)
