Open In App

HTML | DOM IFrame Object

Improve
Improve
Like Article
Like
Save
Share
Report

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 =
        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:

 iframe 

After Click on the button:

 iframe 

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:

 iframe 

After Click on the button:

 iframe

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 


Last Updated : 17 Jun, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads