New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

An example application

From: HTML5: Messaging and Communications in Depth

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.

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.

Show transcript

This video is part of

Image for HTML5: Messaging and Communications in Depth
HTML5: Messaging and Communications in Depth

11 video lessons · 5713 viewers

Bill Weinman
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold

Are you sure you want to delete this note?

No

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
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.