Q:

Automatically Adjust iFrame Height According to its Contents Using JavaScript

mhmadesk
Save to bookmark
|
2022-05-18
|
  335 
Very Easy
0

Automatically Adjust iFrame Height According to its Contents Using JavaScript

JavaScript programming,
login and add your own answer to this question

All Answers

mhmadesk
2022-05-18
need an explanation for this answer? contact us directly to get an explanation for this answer

Use the contentWindow Property

You can use the JavaScript contentWindow property to make an iFrame automatically adjust its height according to the contents inside it, so that no vertical scrollbar will appear.

Let's try out the following example to understand how it really works:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Auto Adjust iFrame Height Based on Content</title>
<style>
    iframe{
        width: 100%;
        border: 2px solid #ccc;
    }
</style>
</head>
<body>
    <iframe src="demo.php" id="myIframe"></iframe>
    
    <script>
    // Selecting the iframe element
    var iframe = document.getElementById("myIframe");
    
    // Adjusting the iframe height onload event
    iframe.onload = function(){
        iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';
    }
    </script>
</body>
</html>

need an explanation for this answer? contact us directly to get an explanation for this answer

total answers (1)

JavaScript / jQuery Frequently Asked Questions
This question belongs to these collections

Similar questions

need a help?

find thousands of online teachers now
How to Call Multiple JavaScript Functions in onCli... >>
<< How to Get the Value of Text Input Field Using Jav...