Goodbye iframes, hello PHP readfile()

Posted on Mar 26, 2010 in Web Dev | 2 comments

As part of a recent web-development project, a team I was a part of decided the best way to implement two features (user alerts and a system-availability summary) was with iframes.

The reasoning behind this decision was this: the public web site that needs these features runs on a server separate from the server that hosts the database and other processing systems. Rather than tying in data from these systems to the public website in a more sophisticated method (web services, database extract, etc.), it was decided that the processing systems would simply write out updates to static HTML files, which would be displayed via iframes on the public site. Easy.

(For those who aren’t familiar with them, a good way to think of an iframe is as a “window” within a web page. It’s section of a web page that displays content from a different web page within it, in the same way a wall of your house with a window “displays” the world outside. You can get more info on iframes here.)

Easy, yes. Elegant… far from it. As one of the developers of the public site, I didn’t like the iframe approach. They are problematic in a few respects:

• Caching issues – suppose the iframed page updates with new content, but the page containing the iframe uses a cached version of that page even after a refresh. It shouldn’t happen, but clearly it does.
• Styling issues – iframes can be styled just like any other element. Except that Internet Explorer treats iframes differently than do other browsers. For example, even styling the iframe to have no border (or a white one), it still renders in IE with a border. Same for scrollbars despite overflow:hidden being set.
• Spacing issues – if the content of the iframe varies much (as was the case with the site I worked on) you end up with either a lot of whitespace inside the iframe, or—worse in my opinion—a set of scrollbars in it to see the overset (hidden) content.

So I dug around and found a method that kicks the iframe to the proverbial curb and avoids all these issues. It’s PHP’s readfile() function, and it really couldn’t be simpler:

<?php
$contentFile = "http://domain.com/directory/content-to-display.aspx";
readfile( $contentFile );
?>

which replaces this iframe code:

<iframe id="content"
        src="http://domain.com/directory/content-to-display.aspx">
  <p>Your browser does not support iframes. Please upgrade to
     <a href="http://getfirefox.com">a modern browser</a>.</p>
</iframe>

So instead of a looking through a window to that “outside” content, this handy function takes that content and brings it “inside” your page and displays it as though it were written there.

There’s always something, though

You can see the amount of code is about the same but the non-iframe approach resolves the issues described above. But there is a case when readfile() won’t work (other than when developing a web server that doesn’t have PHP installed!): when the content being read in contains relative paths.

A relative path is a web address to an image, file, or link that’s given relative to the page in which it appears. Absolute paths, on the other hand, are “fully qualified,” meaning they work no matter where they are. They’re longer an pose much more of a hassle for web developers when coding or if a file moves to a new server. Here’s a simple example to illustrate:

• Relative path: <img src=”../images/photo.jpg”>
• Absolute path: <img src=”http://mydomain.com/images/photo.jpg”>

Relative paths break when read in using readfile() because their structure now become relative to the page that included the readfile() call. That means images, links, and styling and interactivity (through included CSS and javascript files) will all fail unless they employ absolute paths and that is very unlikely. This scenario illustrates that not all tools are suited for every need, and web developers must know when to use which tool.

But if you’re trying to display some basic content, as I was, PHP’s readfile() function provided a much better solution. Give it a shot.

Related: If you liked this, check out:

1. Goodbye Contractor; Hello Employee No, this isn’t a post about a new album by...
2. Saving time with PHP and date math You may have cringed when reading the term “date math,”...