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 Install and Use Nano Text Editor in Linux
Many times, working in command line, man...How to install tar.gz or tar.bz2 file in Ubuntu
In modern Linux distribution, almost sof...Most Powerful JavaScript Libraries Designed for Deep Leaning Devlopment
JavaScript, one of the core programming...Laravel User Email Verification and Account Activation Example
Today, Laravel is a most popular PHP fra...Laravel orderBy on Eloquent Relationships example
Laravel eloquent relationships provides...