Advertisements
Automatically Adjust iFrame Height According to its Contents Using JavaScript
Topic: JavaScript / jQueryPrev|Next
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:
Example
Try this code »<!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>Related FAQ
Here are some more FAQ related to this topic:
- How to insert HTML content into an iFrame using jQuery
- How to detect click inside iframe using JavaScript
- How to animate a DIV height based on the content using jQuery
Advertisements
