contentWindow
PropertyYou 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>
Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on [email protected]
How to Check If a String Contains a Specific Word in PHP
Use the PHP strpos() Function You can...Laravel 8 Simple pagination example
In this article, we will show list of pr...How to count all elements or values in an array in PHP
Use the PHP count() or si...How to Remove index.php from URL in Laravel
In this article, i will share with you h...Copy text to clipboard with clipboard.js
When working on front-end side, we alway...