Taking Across Domains in Html5

About Taking Across Domains

Client-side web applications have always been restricted from talking directly to scripts on other domains, a restriction designed to protect users. There are numerous clever ways around this restriction, including the use of server-side proxies and clever URL hacks. But now there’s a better way. The HTML5 specification introduced Cross-document Messaging , an API that makes it possible for scripts hosted on different domains to pass messages back and forth. For example, we can have a form on http:// support.awesomecompany.com post content to another window or iframe for Taking Across Domains.

whose content is hosted on http://www.awesomecompany.com. It turns out that for our current project, we need to do just that. AwesomeCo’s new support site will have a contact form, and the support manager wants to list all the support contacts and their email addresses next to the contact form. The support contacts will eventually come from a content management system on another server, so we can embed the contact list alongside the form using an iframe. The catch is that the support manager would love it if we could let users click a name from the contact list and have the email automatically added to our form. We can do this quite easily, but you’ll need to use web servers to properly test everything on your own setup. The examples we’re working on here don’t work in every browser unless we use a server. See the sidebar on the following page for more on this. The Contact List We’ll create the contact list first for Taking Across Domains.

Our basic markup will look like this for Taking Across Domains:

<ul id="contacts">
<li>
<h2>Sales</h2>
<p class="name">James Norris</p>
<p class="email">[email protected] </p>
</li>
<li>
<h2>Operations</h2>
<p class="name">Tony Raymond</p>
<p class="email">[email protected]</p>
</li>
<li>
<h2>Accounts Payable</h2>
<p class="name">Clark Greenwood</p>
<p class="email">[email protected] </p>
</li>
<li>
<h2>Accounts Receivable</h2>
<p class="name">Herbert Whitmore</p>
<p class="email">[email protected]</p>
</li>
</ul>

On that page, we’ll also load both the jQuery library and our own custom application.js file and a simple style sheet. We’ll place this in our head section here to Taking Across Domains:

<script type= "text/javascript"
charset="utf-8"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" >
</script>
<script type= "text/javascript"
src="javascripts/application.js" >
</script>
<link rel="stylesheet" href="style.css" type="text/css" media="screen">

The style sheet for the contact list looks like this Taking Across Domains:

ul{
list-style: none;
}
ul h2, ul p{margin: 0;}
ul li{margin-bottom: 20px;}

It’s just a couple of small tweaks to make the list look a little cleaner.When a user clicks an entry in our contact list, we’ll grab the email from the list item and post a message back to the parent window. The postMessage( ) method takes two parameters: the message itself and the target window’s origin. Here’s how the entire event handler looks for Taking Across Domains:

$(function(){
$("#contacts li" ).click(function(event){
var email = ($(this).find( ".email" ).html());
var origin = "http://192.168.1.244:3000/index.html" ;
window.parent.postMessage(email, origin);
});
});

You will need to change the origin if you’re following a long, since it has to match the URL of the parent window. 6 , Now we need to implement the page that will hold this frame and receive its messages. The Support Site The support site’s structure is going to look very similar, but to keep things separate, we should work in a different folder, especially since this site will need to be placed on a different web server to Taking Across Domains.

The Support Site for Taking Across Domains

The support site’s structure is going to look very similar, but to keep things separate, we should work in a different folder, especially since this site will need to be placed on a different web server. We’ll need to make sure you include links to a style sheet, jQuery, and a new. Our support page needs a contact form and an iframe that points to our contact list. We’ll do something like this:

<div id="form">
<form id="supportform">
<fieldset>
<ol>
<li>
<label for="to">To </label>
<input type="email" name="to" id="to">
</li>
<li>
<label for="from">From </label>
<input type="text" name="from" id="from">
</li>
<li>
<label for="message">Message</label>
<textarea name="message" id="message"></textarea>
</li>
</ol>
<input type="submit" value="Send!">
</fieldset>
</form>
</div>
<div id="contacts">
<iframe src="http://192.168.1.244:4567/index.html"></iframe>
</div>

We’ll style it up with this CSS that we add to style.css for Creating Taking Across Domains:

#form{
width: 400px;
float: left;
}
#contacts{
width: 200px;
float: left;
}
#contacts iframe{
border: none;
height: 400px;
}fieldset{
width: 400px;
border: none;
}
fieldset legend{
background-color: #ddd;
padding: 0 64px 0 2px;
}
fieldset>ol{
list-style: none;
padding: 0;
margin: 2px;
}
fieldset>ol>li{
margin: 0 0 9px 0;
padding: 0;
}
/* Make inputs go to their own line */
fieldset input, fieldset textarea{
display:block;
width: 380px;
}
fieldset input[type=submit]{
width: 390px;
}
fieldset textarea{
height: 100px;
}

This places the form and the iframe side by side and modifies the form. on the previous page Taking Across Domains. Receiving the Messages The on message event fires whenever the current window receives a message. The message comes back as a property of the event. We’ll register this event using jQuery’s bind( ) method so it works the same in all browsers.

$(function(){
$(window).bind("message" ,function(event){
$("#to" ).val(event.originalEvent.data);
});
});

jQuery’s bind( ) method wraps the event and doesn’t expose every property. W e can get what we need by accessing it through the event’s originalEvent property instead. If you open this in Firefox, Chrome, Safari, or Internet Explorer 8, you’ll see that it works extremely well. Now let’s make it work for IE 6 and 7.

Falling Back for Taking Across Domains

To support IE 6 and 7, we’ll use the jQuery Postback plug-in, which emulates cross-domain messaging. W e ’ l use jQuery’s getScript( ) method to pull that library in only when we need it. To do that, we’ll just detect whether the postMessage( ) method exists. First, we’ll modify our contact list for Taking Across Domains.

if(window.postMessage){
window.parent.postMessage(email, origin);
}else{
$.getScript("javascripts/jquery.postmessage.js" , function(){
$.postMessage(email, origin, window.parent);
});
}

Now, let’s turn our attention to the support site. We’ll use the same approach here, pulling in the library and calling the newly added receiveMessage() method Taking Across Domains.

if(window.postMessage){
$(window).bind("message" ,function(event){
$("#to" ).val(event.originalEvent.data);
});
}else{
$.getScript("javascripts/jquery.postmessage.js" , function(){
$.receiveMessage(
function(event){
$("#to" ).val(event.data);
});
});
}

That’s it! We can now talk across windows in a whole bunch of browsers. This is just the beginning, though; you can expand this technique to do two-way communication, too. Any window can be a sender or a receiver, so take a look at the specification and see what you can build to Taking Across Domains!

andcombd