Remote Scripting with iframes - Passing Data from Parent Window to iframe using Query String
(Page 3 of 4 )
This time, the first thing that Joe did was change the extension of each of the pages of his site to .php so he could use them with a PHP include. Next, he added a query string to each of his links so that he could send data to the iframe utilizing the Get method. Since the Wizards' site had five pages, now the main page with menu and iframe looked something like this:
<a href="menu.php?page=pageone.php" target="aname">page 1</a><br />
<a href="menu.php?page=pagetwo.php" target="aname">page 2</a><br />
<a href="menu.php?page=pagethree.php" target="aname">page 3</a><br />
<a href="menu.php?page=pagefour.php" target="aname">page 4</a><br />
<a href="menu.php?page=pagefive.php" target="aname">page 5</a>
Then he wrote a simple PHP script called "menu.php" to switch the page content depending on which link was clicked, as follows:
<?php
$page = $_GET["page"];
if ($page) {include ("$page");
} else {
include ("home.php");
} ?>
Finally, Joe created the iframe tag like this:
<iframe src="menu.php" name="aname" width = 100% height = 530></iframe>
Now the Wizards' site operated with no page reloads whatsoever! The main page remains loaded in the main window, and "menu.php" remains loaded in the iframe. As Joe clicked on the links of his menu, the page content changed, but the URL displayed in the browser address bar remained that of the main page. The Wizards fan club members were very impressed!
Due to the inability of an iframe to resize itself to accommodate content of various sizes, this method is less than ideal for the purpose of content navigation, unless all of the pages of content are the same size. The example was chosen to illustrate both the advantages and a disadvantage of using iframes for remote scripting.
Ajax request response methods can be used in a similar manner without a problem as far as varying content size, but they suffer from a drawback that the iframe navigation method we described does not. With the iframe method of navigation in the above example, the browser's "Back" button works as expected in most browsers. When the back button is clicked, the content in the iframe reverts to the previous content. The main page remains loaded. This is the behavior that the user probably expects, since it emulates how traditional navigation works.
With request response methods, on the other hand, the back button will probably not work as expected in most browsers. In this case, when the back button is clicked, the main page reverts to the previous main page, which is not what the user would expect. There are workarounds for this problem, but they are ugly.
Next: Other uses >>
More HTML Articles
More By John Best
