Start learning with our library of video tutorials taught by experts. Get started

HTML5: Messaging and Communications in Depth

An example application


From:

HTML5: Messaging and Communications in Depth

with Bill Weinman

Video: An example application

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.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
Please wait...
HTML5: Messaging and Communications in Depth
43m 19s Intermediate Jan 23, 2012

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.

Subjects:
Developer Web Web Development
Software:
HTML
Author:
Bill Weinman

An example application

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.

And again, you'll see a lot of support stuff in here that has more to do with the rest of course than perhaps this particular example. And then crossDomainTwo.html is loaded up on two.3sn.net, and this is the document that gets loaded inside of the frame. So taking a look first at crossDomainOne.html, the init function gets called down here at the bottom of the JavaScript. This is a technique that I'll use a lot window.onload = init. And so when it gets that onload event, that means that the document is all loaded up, and it calls this init function. And one of the first things that it does is it grabs the frame element and it sets its source to URLTwo, and that loads the frame.

So the frame element is down here in the HTML, and you notice it does not have a source. And up here at the top of the JavaScript you'll see URLTwo, here on line 36, and that's the URL that gets loaded up for the second document. And I did this because it's a convenient way to be able to change the URL in one place. That actually makes it easier to experiment with it. Like for instance, if I wanted to change it to three.3sn.net--and I'll save that and go and load this up on the browser--it'll do it, and it gives me an error message, "message from un- trusted origin three.3sn.net." Because well, we'll get into the details of how this is working later on, but we're actually specifying the origin of the documents that we're sending and receiving messages from, so that we can't easily be spoofed.

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.

Share a link to this course
Please wait... Please wait...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed HTML5: Messaging and Communications in Depth.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked