DHTML Utopia Modern Web Design Using JavaScript & DOM- P12

DHTML Utopia Modern Web Design Using JavaScript & DOM- P12:In a single decade, the Web has evolved from a simple method of deliveringtechnical documents to an essential part of daily life, making and breaking relationshipsand fortunes along the way. “Looking something up on the Internet,”by which is almost always meant the Web, is now within reach of almost anyoneliving in a first-world country, and the idea of conducting conversations andbusiness (and probably orchestras) in your Web browser is no longer foreign, butpart of life....
Nội dung trích xuất từ tài liệu:
DHTML Utopia Modern Web Design Using JavaScript & DOM- P12 Chapter 8: Remote Scripting A simple iframe Below is an iframe, styled in size with CSS and displaying a different document. The HTML document displayed by the iframe is trivial and unstyled: File: simple-iframe-content.html This is a document in the iframe. Figure 8.1 shows the page display. Figure 8.1. The document with an iframe that displays another document. 200Licensed to siowchen@darke.biz Using There’s no sign that the iframe document is separate from that which surrounds it. Replacing iframes You can change the document that displays inside the iframe using a script loc- ated in the surrounding document. If the iframe is styled so as not to draw at- tention to itself, this technique creates the illusion that part of the parent docu- ment has changed. The iframe element’s src attribute is, like other attributes on HTML elements, available as a property of the corresponding DOM object. Here’s a simple script that can be called from a button press or link click; it merely changes the docu- ment displayed in the iframe: function changeIFrame() { document.getElementById(myframe).src = http://www.google.com/; } This example is so simple it doesn’t even need JavaScript. iframes act like normal frames and can therefore be the target of any hyperlink. You can display a link’s destination in an iframe by setting the target attribute on the link to the name of the iframe. Retrieving Data with iframes With further scripting, it’s possible for the iframe’s newly-loaded page to pass data back to its parent page. Scripts in the iframe content page can call functions in the parent page by referring to those parent-page functions as window.parent.functionName. This means that we can put any number of smart scripts in the parent page, ready for triggering by the iframe content as needed. Let’s look at a simple example. First, the main page: File: simple-iframe-2.html A simple iframe example 201Licensed to siowchen@darke.biz Chapter 8: Remote Scripting function receiveData(data) { document.getElementById(response).firstChild.nodeValue = data; } An iframe to which we send requests Send a request Response data received No data yet. There’s a lot going on in this document, so let’s pick through it slowly. First, there’s a link to a style sheet. It’s trivial stuff: File: simple-iframe-2.css div { border: 1px solid black; padding: 0 0 1em 0; width: 20em; } h2 { background-color: black; color: white; text-align: center; margin: 0; } div p { padding: 0 1em; } #scriptframe { width: 300px; height: 100px; 202Licensed to siowchen@darke.biz Using border: 2px solid red; } Second, there’s a JavaScript function, receiveData. Notice that it’s not called from anywhere in this page—it’s not even installed as an event listener. It’s just sitting there, waiting for someone else to use it. After that, there’s content. Fig- ure 8.2 shows the page as it appears when it first loads. Figure 8.2. The page ready for data exchanges via iframe. Let’s look at the page’s content tags closely. First is the iframe. Notice that both its id ...