---
title: "IFRAME vs JavaScript-include - FIGHT!"
date: 2002-05-13T13:38:47-04:00
url: https://blog.lmorchard.com/2002/05/13/oooaec/
author: Les Orchard
---

# IFRAME vs JavaScript-include - FIGHT!

<p>Starting to think about this, too:  What's better to use?  an IFRAME, or a <span style='background : #FFFFCE;'><a href="http://www.decafbad.com/twiki/bin/edit/Main/JavaScript?topicparent=Main.FilterData"><b>?</b></a><font color="#0000FF">JavaScript</font></span>-powered include?  I can see elegance and hackishness in both.</p>
<!--more-->
shortname=oooaec

<div id="comments" class="comments archived-comments">
            <h3>Archived Comments</h3>
            
        <ul class="comments">
            
        <li class="comment" id="comment-221086191">
            <div class="meta">
                <div class="author">
                    <a class="avatar image" rel="nofollow" 
                       href="http://johnausten.tripod.com"><img src="http://www.gravatar.com/avatar.php?gravatar_id=489902e4dda27edd54b350d46b9d19c1&amp;size=32&amp;default=http://mediacdn.disqus.com/1320279820/images/noavatar32.png"/></a>
                    <a class="avatar name" rel="nofollow" 
                       href="http://johnausten.tripod.com">john</a>
                </div>
                <a href="#comment-221086191" class="permalink"><time datetime="2002-05-16T22:51:36">2002-05-16T22:51:36</time></a>
            </div>
            <div class="content">If there is anyway you can avoid using any sort of frame, do it. Frames are evil (although I use them on my own site, but this will soon change). I am using a PHP include on some of my sites, and that works fine.</div>
            
        </li>
    
        <li class="comment" id="comment-221086192">
            <div class="meta">
                <div class="author">
                    <a class="avatar image" rel="nofollow" 
                       href="http://IAwiki.net/EricScheid"><img src="http://www.gravatar.com/avatar.php?gravatar_id=92ffcf37d534a7e60938bc270f750979&amp;size=32&amp;default=http://mediacdn.disqus.com/1320279820/images/noavatar32.png"/></a>
                    <a class="avatar name" rel="nofollow" 
                       href="http://IAwiki.net/EricScheid">Eric Scheid</a>
                </div>
                <a href="#comment-221086192" class="permalink"><time datetime="2002-05-17T13:45:56">2002-05-17T13:45:56</time></a>
            </div>
            <div class="content">target="_top" is the cure for frame evilness in this case. Using PHP (or any other server-side) include is not the answer. See the earlier blog/comment as to why.

I've done some more playing about with IFRAMEs and am disatisfied -- they insist on taking up a certain rectangular space, adding scroll bars if necessary. They don't resize to suit.

Javascript it is then.</div>
            
        </li>
    
        <li class="comment" id="comment-221086193">
            <div class="meta">
                <div class="author">
                    <a class="avatar image" rel="nofollow" 
                       href="http://www.decafbad.com"><img src="http://www.gravatar.com/avatar.php?gravatar_id=2ac2cffd36ada8c734b90e02a1e5c1ac&amp;size=32&amp;default=http://mediacdn.disqus.com/1320279820/images/noavatar32.png"/></a>
                    <a class="avatar name" rel="nofollow" 
                       href="http://www.decafbad.com">l.m.orchard</a>
                </div>
                <a href="#comment-221086193" class="permalink"><time datetime="2002-05-17T17:03:46">2002-05-17T17:03:46</time></a>
            </div>
            <div class="content">Sorry I missed you in the blogchat, Eric :)  Was off eating some nummy sushi.  

Anyway, I've pretty much come to the conclusion that IFRAMEs are decent for making custom HTML-based UI things.  I can load things up in IFRAMEs that can use javascript to influence the containing page, and the size & scrollbars are desirable.  

But yeah, the Javascript client-side-include seems to win as a replacement for SSI.  The only thing I don't like terribly is the cramming of everything into a document.writeln(), but I can't come up with a good reason why it gives me the willies.</div>
            
        </li>
    
        <li class="comment" id="comment-221086195">
            <div class="meta">
                <div class="author">
                    <a class="avatar image" rel="nofollow" 
                       href=""><img src="http://www.gravatar.com/avatar.php?gravatar_id=c775a4d231ca5311e135a20d5543916b&amp;size=32&amp;default=http://mediacdn.disqus.com/1320279820/images/noavatar32.png"/></a>
                    <a class="avatar name" rel="nofollow" 
                       href="">Paul</a>
                </div>
                <a href="#comment-221086195" class="permalink"><time datetime="2002-09-01T05:22:47">2002-09-01T05:22:47</time></a>
            </div>
            <div class="content">IFRAME height can be easliy managed via Javascript.

Have Javascript call the IFRAME. In the script, test for browser resolution, make the HEIGHT value for the IFRAME correspond to the resolution.  For ex:  at 800x600, HEIGHT might equal 320, at 1024x768, HEIGHT might equal 400 and so on.  In your script, you can test for res via: resHeight=(screen.height).  The same can be done for width, resWidth=(screen.width).

IFRAME and JAVASCRIPT are a great combo for delivering consistent content to both IE and NS users.  I am in the process of redoing my entire site this way.  All content will be delivered via IFRAMEs to IE & NS6 users; via JS for NS4x users.

If you do it right, your IFRAME pages use the same content scripts.  The real saving grace is that you keep one CSS in your IFRAME pages directory for IE users and another for NS user in you primary directory.

In fact, CSS was the main reason I did this because, as you probably know, NS and IE just don't play that well together using the same CSS.</div>
            
        </li>
    
        <li class="comment" id="comment-221086196">
            <div class="meta">
                <div class="author">
                    <a class="avatar image" rel="nofollow" 
                       href="http://www.dablade.nl"><img src="http://www.gravatar.com/avatar.php?gravatar_id=9e3ba5c8dfe4b6225f1c21fe845094e0&amp;size=32&amp;default=http://mediacdn.disqus.com/1320279820/images/noavatar32.png"/></a>
                    <a class="avatar name" rel="nofollow" 
                       href="http://www.dablade.nl">Maarten</a>
                </div>
                <a href="#comment-221086196" class="permalink"><time datetime="2002-11-10T04:06:47">2002-11-10T04:06:47</time></a>
            </div>
            <div class="content">Actually i have had a lot of trouble properly placing an IFRAME. While it works fine on Win machines, it wont be placed right on Mac's... :(

Only if i place it inline it will get placed right, but i need to move it around and all... not a good idea on a mac. (If ya need anything moving on a mac: get a hammer :))</div>
            
        </li>
    
        <li class="comment" id="comment-221086198">
            <div class="meta">
                <div class="author">
                    <a class="avatar image" rel="nofollow" 
                       href=""><img src="http://www.gravatar.com/avatar.php?gravatar_id=2a51d6a02c99c90224656256c38805ea&amp;size=32&amp;default=http://mediacdn.disqus.com/1320279820/images/noavatar32.png"/></a>
                    <a class="avatar name" rel="nofollow" 
                       href="">Chris Hald</a>
                </div>
                <a href="#comment-221086198" class="permalink"><time datetime="2003-12-22T07:56:35">2003-12-22T07:56:35</time></a>
            </div>
            <div class="content">Mac = toy</div>
            
        </li>
    
        <li class="comment" id="comment-221086205">
            <div class="meta">
                <div class="author">
                    <a class="avatar image" rel="nofollow" 
                       href=""><img src="http://www.gravatar.com/avatar.php?gravatar_id=2a51d6a02c99c90224656256c38805ea&amp;size=32&amp;default=http://mediacdn.disqus.com/1320279820/images/noavatar32.png"/></a>
                    <a class="avatar name" rel="nofollow" 
                       href="">Chris Hald</a>
                </div>
                <a href="#comment-221086205" class="permalink"><time datetime="2003-12-22T07:56:59">2003-12-22T07:56:59</time></a>
            </div>
            <div class="content">Mac = toy</div>
            
        </li>
    
        </ul>
    
        </div>