Automatically adjust iframe height according to its contents using JavaScript
In this tutorial, we will automatically adjust the iframe height according to its contents using JavaScript.
We'll utilize the contentwindow attribute to let the iframe dynamically adapt its height based on its current content, so there's no need for a vertical scrollbar.
Let us know the Iframe format to get the desired output:
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.documentElement.scrollHeight + 'px';
}
The above format is one way in which we can automatically adjust iframe height according to its contents using JavaScript. Let us see different examples to do the same.
Example 1: contetntwindow property
In this example, we will set iframe height according to its content by contentwindow property.
The contentWindow attribute returns the HTMLIFrameElement's Window object. This Window object may be used to access the iframe's document and internal DOM.
Although this property is read-only, its attributes can be modified in the same way as the global Window object can.
var iframe = document.getElementById("myIframe");
iframe.onload = function(){
iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';
Example 2 - using onload function
In this approach, we will set iframe height according to its content by onload function.
The onload attribute is most commonly used within the body> element to run a script once a web page has fully loaded all of its content (including images, script files, CSS files, etc.).
It may, however, be used on other components as well ( "Supported HTML tags").
<iframe src="demo.html" sandbox="allow-same-origin"
onload="this.style.height=(this.contentWindow.document.body.scrollHeight+20)+'px';">
</iframe>
Example 3 Using object
In this approach, we will set iframe height according to its content by creating obj.
The obj is used within the <body> element to execute a script. The only change made is resetting height to 0 on every load in order to enable some browsers to decrease height.
function resizeIframe(object){
object.style.height = 0;
object.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
Example 4: using autoresize()
In this approach, we will set iframe height according to its content by creating autoResize().
We will pass parameter id and create two variables and then resolute out the needed adjustment for iframe height according to its contents.
function autoResize(id){
var newht;
var newwt;
if(document.getElementById){
newht=document.getElementById(id).contentWindow.document.body.scrollHeight;
newwt=document.getElementById(id).contentWindow.document.body.scrollWidth;
}
document.getElementById(id).height=(newht) + "px";
document.getElementById(id).width=(newwt) + "px";
}
Conclusion
In this tutorial, we have automatically adjusted the iframe height according to its contents using JavaScript by different examples. In the first example we iframe the height according to its content by contentwindow property, onload function, creating obj, etc.
