- <p>Below is an iframe, styled in size with CSS and displaying a different document.</p>.
- The HTML document displayed by the iframe is trivial and unstyled:.
- the iframe.</p>.
- There’s no sign that the iframe document is separate from that which surrounds it..
- 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.
- it merely changes the docu- ment displayed in the iframe.
- You can display a link’s destination in an iframe by setting the target attribute on the link to the name of the iframe.
- 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..
- File: simple-iframe-2.html.
- <p id="response">No data yet.</p>.
- First is the iframe .
- It has a target of scriptframe , which matches the iframe .
- If you look closely, you’ll see that the receiveData function declared at the top of the page will do most of the work:.
- File: simple-iframe-2.html (excerpt).
- The response received from the server—and displayed in the iframe —will do just that:.
- <p>This iframe contains the response from the server.</p>.
- 'some data sent from the iframe content page!');.
- it reaches up into the parent, delivering the server response in the form of a string of data ( 'some data…'.
- To summarize, clicking the Send a request link on the main page loads the content page into the iframe (note the target attribute on the link).
- that content page contains JavaScript that calls the receiveData function in the main page.
- There’s an obvious flaw with this method, though: that big, ugly iframe sitting in the middle of the page.
- Although you wouldn’t need to apply the thick border shown above, it’s still there in the page..
- Setting the width and height properties of the iframe to 0 will effectively hide the iframe from view.
- Links on the page can then load other pages into the iframe and receive data from them..
- Since a page is loaded into the iframe via a linked URL, it’s even possible to pass data in the request by adding it to the URL’s query string.
- So, for example, a link in the page could look up an item in a database by requesting iframe- content.php?id=32 .
- the HTML generated by that PHP script would call back the receiveData function in the main page with details of item number 32 from the (server-side) database..
- The next notable flaw with this iframe approach is that it breaks the Back and Forward buttons in the user’s browser.
- A solution is to use JavaScript’s window.location.replace method to load the new document into the iframe , replacing the current history item rather than adding to the history list.
- It’s possible to dynamically create the iframe element with the DOM, rather than rely on it already being present in the HTML document.
- “real time” awareness of the user interactions, which take effect immediately..
- The core of the problem is this: the page that contains the form for dynamic submission (which I’ll christen an autoform) needs to be able to submit that form data to the server without submitting the whole page..
- When the user changes a form element, the autoform reflects that change in the corresponding field in the copy.
- the duplicate form in the iframe is being submitted).
- Since the page is loaded twice—once in the browser window, and once in the hidden iframe —it needs special logic.
- The version that’s loaded into the browser window (the “parent”) needs to create the iframe and load the second copy (the.
- aF.init_child();.
- aF.init_parent();.
- It does this by looking for a containing iframe with ID autoform_ifr in the parent document..
- Let’s now take a step back and look at the basic structure of the page.
- In the finished example, we’ll generate our form page using a server script, for reasons we’ll see shortly.
- For the moment, however, let’s work with a static version of the page:.
- Notice that the form has a Submit button, just like a standard Web form, and that there’s no iframe tag in the page.
- Here’s the style sheet for the page.
- It’s quite simple, except that it contains rules for some classes and elements that are not yet present in the page:.
- The last rule guarantees that the iframe will be invisible to the user..
- Here’s the object signature for our autoform library object..
- In this example, the callback methods in the parent document will be called by the child document contained in the hidden iframe .
- To kick things off, here’s the full text of the init method.
- if (load_child) aF.parent_load_child();.
- The method keeps a flag, load_child , so that the loading of the iframe can be done, at most, once at the end of the script—even if the page contains several forms.
- The body of the method searches for forms with class="auto".
- this will block submission of the form, as we saw in Chapter 6:.
- Safari Finally, any Submit buttons in the form are found and removed from the docu- ment..
- Most of the work is done in the five lines, in which we create a new iframe ele- ment and insert it at the end of the document.
- Next, we complete some object detection in order to get a reference to the iframe ’s document object, using either the contentDocument property of the DOM2 standard, the Internet Explorer- specific contentWindow property, or for Safari, which in some versions has an incomplete implementation of contentDocument , the corresponding entry in window.frames .
- We then use this reference to get the iframe ’s location object, and replace the default blank page with a copy of the current page ( location.href.
- Let’s now turn our attention to the duplicate copy of the page that’s contained in the iframe.
- parent.aF.parent_document_callback(document);.
- if (aF.changedElements &&.
- aF.changedElements.length >.
- parent.aF.parent_callback(aF.changedElements);.
- Here’s the parent_document_callback method, which is called in the parent document to store the document reference:.
- aF.childDocument = docObj;.
- 5 Unfortunately, this causes a new step to be recorded in the navigation history of Mozilla browsers..
- Later, however, when changes made to the parent form cause the child document’s form to submit, the page will be reloaded, with the names of the submitted fields listed in an array called aF.changedElements .
- We want to notify the parent document when that happens, so that it can update the fields in the main form to show that they were successfully submitted.
- To do this, init_child must pass aF.changedElements to the parent_callback method in the parent document..
- Once it has done so, the child document notifies the parent document of its success by calling the parent’s parent_callback method, and passing it a list of the form fields that were submitted..
- on each of the corresponding elements..
- When the user changes a field in the main form, the change event listener, parent_element_change , is called.
- It’s the last of the JavaScript methods we need to implement:.
- “saving” icon to appear in the field, as specified by the style sheet.
- 6 The method then changes the value of this field in the child document to match the newly-changed value in the parent.
- It finds the corresponding element in the child by calling getElementsByName on the handy aF.childDocument reference that was created during document setup.
- The method then submits the form in the child, which sends the data to the server but does not alter the parent (displaying in the browser window)..
- No matter what we do, the form submission in the child document will add a step to the browser’s navigation history.
- So if a user makes three changes to field values, he or she will get three new steps in the browser history while apparently sitting on a single page.
- On the server, the form submission is processed just like any form submission, returning a slightly modified copy of the form page to the browser.
- This modified page contains a little extra JavaScript that fills aF.changedElements with the names of the fields that the server noted as having changed from the previous values.
- An example of the JavaScript that the server might write follows:.
- aF.changedElements = ['name', 'age'];.
- Here’s the PHP script that does everything we need to produce a working auto- form with the necessary server-side logic:.
- aF.changedElements = [<?php if (count($changed_keys) >.
- When the form is submitted, it saves the submitted values (if any have changed) back into the file, and keeps track of the altered fields in a PHP array variable named $changed_keys .
- 7 Most of the work that makes this into an autoform is done by our library script, so we have included it, along with its complementary style sheet:.
- every value in the submitted form which differed from the previously saved value.
- The PHP code needs to make this list of changed elements available to JavaScript, so it should write out a JavaScript snippet containing a JavaScript list of the names of the changed elements.
- aF.changedElements = ['name', 'shoesize'];.
- The script builds up a list of the changed fields in $changed_keys , so it uses this to print out the necessary JavaScript:.
- aF.changedElements = [<?php.
- The rest of the work is carried out by the JavaScript library as described above..
- The writing out of the aF.changedElements value is the only thing that’s required to make the form an autoform.
- exactly how the data is saved on the server-side doesn’t affect the autoform nature of the page, and can be done any way you like—even via a database..
- Using such techniques, you don’t have to create a separate iframe document to communicate with the server—the main document will do fine.
- “preloading” the images to be used for the rollover