Home arrow HTML arrow Page 3 - Remote Scripting with iframes
HTML

Remote Scripting with iframes


In this second part of a two-part series on the ins and outs of iframes, we will explore more uses for iframes. The ones we will discuss fall into the broad category of remote scripting, or remote procedure calls (RPC). You won't find any sophisticated code in this article, but we will do quite a bit with just plain HTML tags and some basic PHP.

Author Info:
By: John Best
Rating: 5 stars5 stars5 stars5 stars5 stars / 3
December 22, 2008
TABLE OF CONTENTS:
  1. · Remote Scripting with iframes
  2. · Using iframes for Site Navigation
  3. · Passing Data from Parent Window to iframe using Query String
  4. · Other uses

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
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.


blog comments powered by Disqus
HTML ARTICLES

- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5
- BBC Adopts HTML 5, Mozilla Addresses Issues
- Advanced Sticky Footers in HTML and CSS
- HTML and CSS Sticky Footers
- Strategy Analytics Predicts HTML5 Phones to ...
- HTML5 Guidelines for Web Developers
- Learning HTML5 Game Programming
- More Engaging CSS3 and HTML Background Effec...
- Engaging HTML and CSS3 Background Effects
- More Web Columns with CSS3 and HTML
- Columns with CSS3 and HTML
- Creating Inline-Block HTML Elements with CSS
- Drag and Drop in HTML5: Parsing Local Files

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 4 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials