Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
This course shows how to communicate between web pages, both within a single domain and across one or more domains, using the HTML5 Messaging API. Author Bill Weinman reviews security and the same origin policy, details cross-origin scripting techniques, and explores examples of cross-document messaging. The course describes how to register and send messages to listeners and handle errors.
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.
There are currently no FAQs about HTML5: Messaging and Communications in Depth.
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.