Kode Otomatis Menyesuaikan Height Konten Pada iFrame Menggunakan JavaScript

<iframe> Dalam pengembangan web, Para pengembang biasa nya menyisipkan satu halaman HTML di halaman lain. Ini sangat berguna untuk Anda karena iframe adalah bagian dari HTML sehingga Anda dapat menggunakannya di mana saja seperti pada layanan pembuat situs web seperti Wix dan Squarespace.

Bahkan dalam Situs YouTube biasa menggunakan iframe untuk menyisipkan video, dan Google menggunakannya untuk otentikasi OAuth2, dan oleh perusahaan SaaS seperti Mailchimp, Typeform dan Outgrow untuk menawarkan konten yang dapat disematkan.

Masalahnya

Secara default, iframes memiliki ketinggian tetap. Tidak apa-apa jika konten Anda juga memiliki ketinggian tetap tetapi jika tinggi konten Anda berubah, Anda dapat dengan mudah melihat monstrositas scrollbar ganda seperti ini:

Bagaimana jika Anda ingin iframe berperilaku seperti elemen HTML biasa, dengan konten yang membungkus secara vertikal?

Untuk melakukan ini, Anda perlu secara dinamis mengubah tinggi iframe tetapi pertimbangan keamanan berarti tidak mungkin bagi jendela induk untuk mengakses elemen dalam iframe.

Pada artikel ini, saya akan menjelaskan cara yang sangat mudah untuk mencapai efek ini, dengan menggunakan JavaScript.

Anda dapat menggunakan konten JavaScript Untuk membuat iFrame secara otomatis menyesuaikan tingginya dengan konten yang ada di dalamnya, sehingga tidak ada scrollbar vertikal yang akan muncul.

Mari kita coba contoh berikut untuk memahami cara kerjanya:

<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>