<pclass="email">[email protected]</p>
</li>
<li>
<h2>AccountsPayable</h2>
<pclass="name">ClarkGreenwood</p>
<pclass="email">[email protected]</p>
</li>
<li>
<h2>AccountsReceivable</h2>
<pclass="name">HerbertWhitmore</p>
<pclass="email">[email protected]</p>
</li>
</ul>
</body>
</html>On that page, we’ll also load both the jQuery library and our own custom
application.js file right above the closing <body> tag:html5_cross_document/contactlist/index.html
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script><scriptsrc="javascripts/application.js"></script>The style sheet for the contact list looks like this:
html5_cross_document/contactlist/stylesheets/style.css
ul{
list-style:none;
}ul h2,ul p{margin:0;}ul>li{margin-bottom:20px;}It takes just a couple of small tweaks to make the list look a little cleaner.
Posting the Message
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. Remember, the contact list is being served from http://localhost:4000,
but it’s going to be included in an <iframe> by a page served from
http://localhost:3000. So that’s the URL we’ll send messages back to.Here’s how the entire event handler looks:
report erratum • discussTalking across Domains • 215
Download from Wow! eBook <www.wowebook.com>