HTML | DOM IFrame Object

The IFrame Object property in HTML DOM is used to create and access the <iframe> element within the object. An inline frame is used for embedding another document within the current HTML document.

Syntax:

It is used to access a <iframe> element.

var x = document.getElementById("myframe");

It is used to create a <iframe> element.

var x = document.createElement("IFRAME");

Property Values:

align: It is used to set or return the value of the align attribute in the iframe. It is not supported bu HTML 5.
contentDocument: It is used to return the document object generated by an iframe.
contentWindow: It is used to return the window object generated by an iframe.
frameBorder: It is used to set or return the frameborder attribute in the iframe. It is not supported by HTML 5.
height: It is used to set or return the height attribute in the iframe.
longDesc: It is used to set or return the value of the longdesc attribute in an iframe. It is not supported by HTML 5.
marginHeight: It is used to set or return the value of the marginheight attribute in an iframe. It is not supported by HTML 5.
marginWidth: It is used to set or return the value of the marginwidth attribute in an iframe. It is not supported by HTML 5.
name: It is used to set or return the value of the name attribute in an iframe.
sandbox: It is used to return the value of the sandbox attribute in an iframe.
scrolling: It is used to set or return the value of the scrolling attribute in an iframe. It is not supported by HTML 5.
seamless: It is used to set or return whether an iframe should look like it is a part of the containing document
src: It is used to set or return the value of the src attribute in an iframe.
srcdoc: It is used to set or return the value of the srcdoc attribute in an iframe.
width: It is used to set or return the value of the width attribute in an iframe.

Example 1: This example describes the getElementById() method to access <iframe> element.

HTML

<!DOCTYPE html>

<html>
 
<head>

    <title> 

        HTML DOM IFrame Object  

    </title>

</head>
 
<body>

    <h1>GeeksforGeeks</h1>

    <h2>DOM IFrame Object Property</h2>

    <button onclick = "myGeeks()">

        Click Here!

    </button>

    <br><br>
 
    <iframe id = "GFGFrame" src =

        "https://ide.geeksforgeeks.org/tryit.php" 

        width = "400" height = "200">

    </iframe>

    <p id = "GFG"></p>

    <!-- script to access iframe element -->

    <script>

        function myGeeks() {

            var x = document.getElementById("GFGFrame").src;

            document.getElementById("GFG").innerHTML = x;

        }

    </script>

</body>
 
</html>

Output: Before Click on the button:

After Click on the button:

Example 2: This example describes the document.createElement() method to create <iframe> element.

HTML

<!DOCTYPE html>

<html>
 
<head>

    <title> 

        HTML DOM IFrame Object 

    </title>

</head>
 
<body>

    <h1>GeeksforGeeks</h1>

    <h2>DOM IFrame Object Property</h2>

    <button onclick = "myGeeks()">

        Click Here!

    </button>
 
    <br><br>

    <!-- script to create iframe element -->

    <script>

        function myGeeks() {

            /* Create iframe element */

            var ifram = document.createElement("IFRAME");

            /* Set the source attribute */

            ifram.setAttribute("src", 

                    "https://ide.geeksforgeeks.org/tryit.php");

            /* Set the iframe height */

            ifram.setAttribute("height", "200");

            /* Set the iframe width */

            ifram.setAttribute("width", "400");

            document.body.appendChild(ifram);

        }     

    </script>

</body>
 
</html>

Output: Before Click on the button:

After Click on the button:

Supported Browsers: The browser supported by DOM IFrame Object property are listed below:

Google Chrome 1.0 and above
Edge 12.0 and above
Firefox
Internet Explorer
Opera
Safari

Article Tags :

HTML

Web Technologies

HTML-DOM