• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 4. Content > Adding External Content with iframes

Adding External Content with iframes

Adding an iframe to a Web page is a standard and effective method for embedding one HTML file into another. In addition, the content of an iframe can be changed without affecting the content of the rest of the page.

However, one drawback to using iframes to embed content is that, unless you have the width and height of the iframe set to the exact width and height of the page being embedded, you will either get a scrollbar for the iframe or excess space.

To overcome this limitation, we need to add a little JavaScript to dynamically resize the iframe so that it exactly fits the width and height of the content it contains.

To import external content with iframes:


Create a new HTML file (we’ll call it index.html), which will contain the iframe (Code 4.2). You can add any other content you want to this file, but it will only appear in this page. Steps 2–4 apply to this page.

Code 4.2. This HTML file (index.html) uses an iframe to import content and then the function.

→ Transitional//EN" "http://www.w3.org/TR/
→ xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
        <meta http-equiv="content-type"
        → content="text/html;charset=utf-8" />
        <title>DHTML &amp; CSS Advanced |
        → Using Iframes</title>
           <script language="javascript"
           → type="text/javascript">
        function iframeResize(iframeWindow) {
								var iframeElement = parent.document.getElementById(iframeWindow.name);
								if (iframeWindow.document.height) {
								iframeElement.style.height =iframeWindow.document.height +35 +'px';
								iframeElement.style.width =window.document.width + 5 +'px';
								else if (iframeWindow.document.documentElement.scrollHeight) {
								iframeElement.style.height =iframeWindow.document.documentElement.scrollHeight + 35 + 'px';
								iframeElement.style.width =iframeWindow.document.documentElement.scrollWidth+ 5 + 'px';
								marginwidth="0" marginheight="0"
								height="200px" width="100%">
								<a href="external.html">External Content</a>


function iframeResize(iframeWindow)
→ {...}

Add the function iframeResize() to the page. This identifies the iframe element to be resized (based on the name passed to it in the function call) and then resizes the iframe based on the width and height of the content it contains.


Add your <iframe> tag to the page with its initial source and a name and id. Other properties can be added as desired.

<a href="external.html">External
→ Content</a>

Inside the <iframe> tag, add a link to external.html for browsers that do not support iframes.


Create a new HTML file, and save it as external.html (Code 4.3). This file contains whatever HTML and content you want to use. Step 6 also applies to this page.

Code 4.3. The external content (external.html) being imported into index.html. Notice the onload event handler in the <body> tag used to trigger the function in code 4.2 that resizes the frame.

→ Transitional//EN"
     → xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
→ xml:lang="en">
        <meta http-equiv="content-type"
        → content="text/html;charset=utf-8" />
        <title>DHTML &amp; CSS Advanced |
        → External iFrame</title>
     <body onload="parent.iframeResize(window)">
        <div style="text-align:center">
           <h1>Alice Through the Looking
           → Glass</h1>
           <h3>Chapter 5</h3>
           <img src="alice_5_1.jpg" width="330"
           → height="432" border="0">



In the <body> tag of any pages you will be loading into the iframe, you’ll need to add an onload event handler to trigger the iframeResize() function in the surrounding (parent) frame (Figure 4.3).

Figure 4.3. The content from external.html is loaded into the iframe, which automatically snaps to fit the content of the document. In this example, the iframe border is still visible, but these can be turned off, leaving the visitor no idea that the content was not an integral part of the page.

✓ Tip

  • Because the iframe acts like an independent frame, you have to make sure to target links to the right place.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint