Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
This is a simple example application that implements cross-origin messaging using the HTML5 messaging API. So you can see we have two documents loaded up: one outside and one inside a frame. And again, because Internet Explorer won't even do this if they're in separate tabs, I've had to use frames for all of these examples. But just know that you can do exactly the same thing in tabs if you're using Firefox or Chrome or Safari or any other browser. But that doesn't work in Internet Explorer.
So the way I have this set up is that these two documents are hosted on a server where the same file system is accessible from different domains, and so they're effectively in two different domains, at least from the perspective of the browser. And so the browser has its same origin policy in place and it's treating these as being from two separate origins. So the outer document is on a host called one.3sn.net, and the inner document is on a host called two.3sn.net.
And you'll notice these timestamp log messages tell you the sequence of how things are happening. Document one loads up and then as part of its loading process, it loads up document two. And document two comes along as soon as it's loaded and it grabs the window object for its parent and it sends a message to its parent, and so it says over here at 035 milliseconds, "Message sent to windowOne." And then at 036 milliseconds it says, "Message from origin two.3sn.net." And then there's the message, "this is from windowTwo," and then it sends a message right back to windowTwo at 037 milliseconds, and then we have a message from origin one.3sn.net, and this is from windowOne.
So here is an example of two different documents in two different domains sending data back and forth across that same-origin policy barrier. Let's take a look at the code. First of all, I'm just going to page through really slowly for those of you who are typing it in. This first document is called crossDomainOne.html, and this is the document loaded up at one.3sn.net.
So I'll just change that back. What you're going to need to do is every time we bring up one of these examples, you're going to need to come in here in both of these documents you're going to need to change these variables to match the origin and the URLs that you're actually using for your documents. These will not work on your servers if you've got my URLs in here. And so in the document that goes in the outer window, in the One document--and it is pretty much always going to be on the same line numbers, 35 and 36--you're going to change the origin for Two and URL for Two.
And then likewise, for the Two document, you'll see that there is an origin around line number 21. The line numbers might move a little bit here and there, but for the most part they're going to be very close or exactly the same throughout the course. So we'll be using this very simple example--I'll reload it here to get ride of the error message-- throughout this course to demonstrate the various techniques that we're using to make this work. And you can see that it's pretty simple in implement, and we'll be looking at more details as we go through the course.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 97442 Viewers
61 Video lessons · 84668 Viewers
71 Video lessons · 68871 Viewers
56 Video lessons · 101326 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.