How to Add a Close Button to an IFRAME

Written by kevin lee
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to Add a Close Button to an IFRAME
Keyboards don't have "Close" buttons, but you can add one to an IFRAME. (close image by Melisback from

IFRAMES allow Web developers to create sites within websites. For example, by adding a simple IFRAME tag to your Web page, you can show site visitors a live webcam from another site or even a page from one of your own sites. IFRAMES do not have menus or buttons. To close an IFRAME object, you must add a "Close" button to your Web page and create a close event to hide the IFRAME.

Skill level:


  1. 1

    Open Notepad or your HTML editor and create a new document.

  2. 2

    Add this HTML code to the document:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

    <html xmlns="">


    <title>Add JavaScript After This Title</title>



    <input id="MyCloseButton" type="button" value="Close This Iframe" />

    <div id="DivIframe">

    <iframe src ="" width="80%" height="50%" />




    This code creates an IFRAME and a button that closes it. The IFRAME'S "src" property causes it to display the Whitehouse website. A "div" tag surrounds the IFRAME declaration. Note that the "div" tag has an ID value of "DivIframe." This is an important value. JavaScript code uses this value to identify the IFRAME.

  3. 3

    Add this JavaScript code after the document's "title" section:

    <script language="javascript" type="text/javascript">

    // Line 1

    var close Button = "MyCloseButton";

    // Lines 2-3

    window.onload = SetupButton;

    function SetupButton() {

    // Line 4

    var objButton = document.getElementById(closeButton);

    // Lines 5-8

    if (objButton.addEventListener)

    objButton.addEventListener("click", function () { closeIframe() }, false);

    else if (objButton.attachEvent)

    objButton.attachEvent("onclick", function () { closeIframe() });


    // Lines 9-11

    function closeIframe() {

    objDivIframe = document.getElementById(divIframe); = "none";



    Line one sets the "closeButton" variable. In this example, that variable's value, "MyCloseButton," matches the ID of the button defined in the previous step. Lines 2 through 3 create a function named "SetupButton." This function runs when a browser loads the Web page. Lines 4 through 8 create a click event handler. This event handler calls the function named "closeIframe" when you click the button above the IFRAME. Lines nine through eleven obtain a reference to the "div" object and hide it.

  4. 4

    Save the HTML document. Open your browser and load that doument. The IFRAME containing the Whitehouse website will appear below the "Close This Iframe" button.

  5. 5

    Click the button. The JavaScript code will execute and close the IFRAME.

Tips and warnings

  • In this example, the IFRAME's "src" tag causes the IFRAME to show the Whitehouse website. Change the "src" value to the URL of any site on the Internet to display that site in the IFRAME.

Don't Miss

  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the site, you consent to the use of cookies. For more information, please see our Cookie policy.