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

Chapter 4. Content > Inserting a New iframe Element

Inserting a New iframe Element

Although similar to inserting any other element on a page, inserting an iframe provides an additional challenge because Internet Explorer for Windows won’t allow you to dynamically assign the source attribute for an iframe. So to load the source into the frame, we’ll instead need to change the href value using JavaScript.

The previous two sections demonstrated how to add elements at the end of the document and before a specific object. In this example, you’ll learn how to replace a specific object with the new element.

To insert a new iframe element:

1.
addIframeElement(replaceObjectID,
→ srcVal,widthVal,heightVal,idVal,
→ frameborderVal,scrollingVal,
→ alignVal) {...}


Add the function addIframeElement() to your JavaScript (Code 4.12). This function will add a new <iframe> tag to your Web page based on the attributes passed to it, and then load the indicated source. Steps 1-6 apply to this function.

Code 4.12. The function addIframeElement() places a new iframe tag in the HTML document and then loads the initial HTML source file into the iframe.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
→ Transitional//EN" "http://www.w3.org/TR/
→ xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
     <head>
        <meta http-equiv="content-type"
        → content="text/html;charset=utf-8" />
        <title>DHTML &amp; CSS Advanced |
        → Inserting a New Iframe Element</title>
        <script language="javascript"
        → type="text/javascript">
           function addIframeElement(replaceObjectID,srcVal,widthVal,heightVal,idVal,frameborderVal,scrollingVal,alignVal) {
								var newIframeElement = document.createElement('iframe');
								newIframeElement.setAttribute('width',widthVal);
								newIframeElement.setAttribute('height',heightVal);
								newIframeElement.setAttribute('frameborder',frameborderVal);
								newIframeElement.setAttribute('scrolling',scrollingVal);
								newIframeElement.setAttribute('align',alignVal);
								newIframeElement.setAttribute('id',idVal);
								newIframeElement.setAttribute('name',idVal);
								var replaceObject = document.getElementById(replaceObjectID);
								document.body.replaceChild(newIframeElement,replaceObject);
								top[idVal].location.href=srcVal;
								}
        </script>
     </head>
     <body>
        <h2>CHAPTER VII</h2>
        <h3>The Lion and the Unicorn</h3>
        <div id="chapterText">
           <a href="javascript:void('')"
           → onclick="addIframeElement('chapterText','external.html','100%','350','newIframe','yes','yes','left')">View Page</a>
        </div>
     </body>
</html>


					  

2.
var newIframeElement =
→ document.createElement('iframe');


Define a variable to record the iframe element using createElement().

3.
newIframeElement.setAttribute
→ ('width',widthVal);


Use setAttribute() to set the various attributes associated with this iframe.

4.
var replaceObject = document.
→ getElementById(replaceObjectID);


Define a variable to locate the object to be replaced by the new iframe using getElementById().

5.
document.body.replaceChild
→ (newIframeElement,replaceObject);


Use replaceChild() to replace the specified object with the new iframe.

6.
top[idVal].location.href=srcVal;

Set the href value for the newly created iframe to the desired source, based on the srcVal variable passed to the function.

7.
onclick="addIframeElement
→ ('chapterText','external.html',
→ '100%','350','newIframe','yes',
→ 'yes','left')"


Add an event handler in your Web page to trigger the addIframeElement() function. In this example, I placed the event handler into a link, using the onclick event handler, telling it to replace an area defined by the id chapterText, which also happens to contain the originating link. When the visitor clicks the link, the new iframe appears and the link disappears (Figures 4.19 and 4.20).

Figure 4.19. Before the link is clicked.


Figure 4.20. After the link is clicked the iframe is inserted, replacing the layer containing the link.


✓ Tips

  • Notice that I included both the id and name attributes in the iframe. Although name is generally disappearing in favor of id, id is needed to manipulate the iframe with DHTML, while name is still needed to target content. However, they can both have the same value.

  • You can set the frameborder value to no to get rid of the border for a more seamless design.


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