HTML DOM iFrame Object

HTMLWeb DevelopmentFront 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>

Output

This will produce the following output −

Click on “Click me to create an iframe” button to create an iframe −

raja
Published on 16-Jul-2019 17:21:26
Advertisements