The IFrame object represents an HTML <iframe> element.
| Property | Description |
|---|---|
| align | Not supported in HTML5.
Use style.cssFloat instead. Sets or gets the alignment for an iframe |
| contentDocument | Get the document object generated by an iframe |
| contentWindow | Get the window object generated by an iframe |
| frameBorder | Not supported in HTML5.
Use style.border instead. Sets or gets the frame border for an iframe |
| height | Sets or gets the height attribute in an iframe |
| longDesc | Not supported in HTML5. Sets or gets the longdesc attribute in an iframe |
| marginHeight | Not supported in HTML5.
Use style.margin instead. Sets or gets the marginheight attribute in an iframe |
| marginWidth | Not supported in HTML5.
Use style.margin instead. Sets or gets the marginwidth attribute in an iframe |
| name | Sets or gets the name attribute in an iframe |
| sandbox | Get the sandbox attribute in an iframe |
| scrolling | Not supported in HTML5. Sets or gets the scrolling attribute in an iframe |
| seamless | Sets or gets whether an iframe has border |
| src | Sets or gets the src attribute in an iframe |
| srcdoc | Sets or gets the srcdoc attribute in an iframe |
| width | Sets or gets the width attribute in an iframe |
The IFrame object supports the standard properties and events.
We can access an <iframe> element by using getElementById().
<!DOCTYPE html>
<html>
<body>
<iframe id="myFrame" src="http://java2s.com/style/demo/border.png"></iframe>
<button onclick="myFunction()">test</button>
<p id="demo"></p>
<script>
function myFunction() {<!--from w ww .ja v a 2s. c o m-->
var x = document.getElementById("myFrame").src;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
The code above is rendered as follows:
We can create an <iframe> element by using the document.createElement() method.
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">test</button>
<!-- w ww .j av a 2 s.c o m-->
<script>
function myFunction() {
var x = document.createElement("IFRAME");
x.setAttribute("src", "http://www.example.com");
document.body.appendChild(x);
}
</script>
</body>
</html>
The code above is rendered as follows: