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 · 5764 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
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

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.


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.

Join now "Already a member? Log in

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
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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

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.