HTML DOM iFrame Object

HTML Web Development Front End Technology

The HTML DOM iframe Object represents the <iframe> element of an HTML document.

Let us now create iframe object −

Syntax

Following is the syntax −

document.createElement(“IFRAME”);

Properties

Following are the properties of iframe Object −

Property	Explanation
contentDocument	It returns the document object generated by an iframe HTML element.
contentWindow	It returns the window object generated by an iframe HTML element.
height	It returns and modify the value of height attribute of an iframe HTML element.
name	It returns and modify the value of the name attribute of an iframe HTML element.
sandbox	It returns and alter the value of sandbox attribute of an iframe HTML element.
seamless	It returns and modify whether the iframe should look seamless like it is a part of web page i.e. without borders and without scrollbars.
src	It returns and modify the value of src attribute of an iframe HTML element.
srcdoc	It returns and modify the value of srcdoc attribute of an iframe HTML element.
width	It returns and alter the value of width attribute of an iframe HTML element.

Example

Let us see an example of DOM iframe object −

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
   body{
      text-align:center;
   }
   .btn{
      background-color:lightblue;
      border:none;
      height:2rem;
      border-radius:50px;
      width:60%;
      margin:1rem auto;
   }
</style>
</head>
<body>
<h1>DOM IFrame Object Example</h1>
<button onclick="createIframe()" class="btn">Click me to create an iframe</button>
<script>
   function createIframe() {
      var x = document.createElement("IFRAME");
      x.setAttribute("src", "https://tutorialspoint.com/");
      document.body.appendChild(x);
   }
</script>
</body>
</html>