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 = 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", /* 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
Please Login to comment...