html5_cross_document/contactlist/javascripts/application.js
$("#contactsli").click(function(event){
var email,origin;
email= $(this).find(".email").html();
origin= "http://localhost:3000/index.html";
if(window.postMessage){
window.parent.postMessage(email,origin);
}
});You’ll need to change the origin if you’re following along with your own servers,
since it needs to match the URL of the parent window for security reasons.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. Make sure you include links to
a style sheet, jQuery, and a new application.js file. Our support page needs a
contact form and an <iframe> that points to our contact list. We’ll do something
like this:html5_cross_document/supportpage/index.html
<divid="form">
<formid="supportform">
<fieldset>
<ol>
<li>
<labelfor="to">To</label>
<inputtype="email"name="to"id="to">
</li>
<li>
<labelfor="from">From</label>
<inputtype="text"name="from"id="from">
</li>
<li>
<labelfor="message">Message</label>
<textareaname="message"id="message"></textarea>
</li>
</ol>
<inputtype="submit"value="Send!">
</fieldset>
</form>
</div>
<divid="contacts">
<iframesrc="http://localhost:4000/index.html"></iframe>
</div>Chapter 10. Creating Interactive Web Applications • 216
Download from Wow! eBook <www.wowebook.com> report erratum • discuss