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.
There are few different types of errors you'll be concerned with in your HTML5 messaging application. Fortunately, most of these can be handled in the same way. Here we have a working copy of errors- one start.html and errors-two start.html. I've made working copies on my server, and I'm editing directly on my server. We'll just take a moment now and page through these for the benefit of those of you who need that. And here's errors-two.
Now the first thing we want to do is we want to go into each of these files and edit our constants, make sure those are set correctly. Here we have originTwo, which is set to the hostname of the server with working two on it, and URL two, which is the complete URL to errors-two-working.html. And we'll go into errors-two and check the same thing. And here's the line that you want be concerned with, and make sure that that has the hostname for your originOne server.
And now coming back here into errors-one, we need to add the event handler for the error function. You notice down here we have a function called windowErrorHandler, and this is the error handler, actually for both of these. We have the same function in both of these files. And so that's called windowErrorHandlers. I'm just going to put that in my copy buffer and come up here into the init function and add a handler for that. Now in this case I'm going to use an IDL handler, so I'm going to say window.onerror = and the name of that function with a semicolon.
I am going to save that. The reason I'm using an IDL listener instead of an addEventListener is that support for error handlers with addEventListeners is inconsistent amongst the different browsers. And even here on Firefox it's not completely implemented. So this works well with the IDL listener and it does not work well with the addEventListener. So I'm just going to make copy of this line, and I am going to put exactly this same line into errors-two-working.html. I'll scroll down here to the init function and paste it in right there and press Save.
So now we have the event listener installed for onerror in both of our files, and I am going to come over here to the browser and load this up. So I'm going to load up error-one- working.html on my server, and there you see the messages going back and forth exactly how we expect them to. And now we'll just start introducing some errors and see how that works. It's a really good idea to play around with errors when you're building error handlers, so that you know what to expect. So the first thing we'll do is we'll change our origin from two to three. So this is in errors-one-working.
And so when we come in here and handle message events, the first thing we do is we check if the event origin is equal to this constant and if not, we display this error message here. I am going to come back over here into the browser and reload this. And you notice we get the message, "message from untrusted origin" and it lists the origin where the message came from, which is different than what it was expecting, because here it's expecting three instead of two. So this is a message that we're sending out ourselves from this test, and so it's not really using the onerror handler. Let's go ahead and use the onerror handler now.
So I'm going to change that back, and I am going to come down here and put something nonsensical in this postMessage. I'm just going to say foo. That's not a full URL and so if for some reason you had an error like that, we'll go back into the browser and we'll bring that error up and you see we have an uncaught exception. So, this is our error handler working. You notice when we come down here to our ErrorHandler, it prints the message and the file name and the line number. And here we have the uncaught exception message and the file name and the line number right there.
So this gives us some idea of what the problem is: an invalid or illegal string was specified on line 44. And if we come back up here to line 44, we can deduce what the problem is. So I'm just going to put that back to our constant, and let's go make another error. If I come down here to line 54 and I actually call a function that's not defined--I just misspelled this function here instead of log its xlog, and so I'll press Save and we'll come back over here to the browser and we'll load that up.
And we see it says xlog is not defined, and it doesn't run the rest of the script; it just stops right there. xlog is not defined, gives us the file name and the line number on line 54. So that's exactly what we expect. On the other hand, if we introduce some error here by misspelling the word function, this will not catch the error. Why? Because this is the function where the error handler is actually installed. And so if we never get to that line, we're not going to get our error handler at all. So if I save this and bring this up and run it, you'll see that I get no error message at all.
On the other hand, I can come up here to Tools > Web Developer. This is in the Firefox browser. You have something like this in most of the browsers. Now bring up the console and if I press Reload, you'll notice that I actually get an error message. It's a typical cascading interpreter error message that doesn't really tell you what the problem is, but it gives you an idea of where to look. It says it's missing a semicolon around line 51. And in fact what it is, is it's got an unrecognized keyword. And so we take out that x, and we save it, and we come back in here, and we reload, and we see that everything runs as we expected to.
And I can take down that web developer console. And so now that we have our error handler working, we have a complete set of tools for HTML5 messaging, and we can look at a more interactive example in the next chapter.
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.