Terkadang kita membutuhkan Iframe untuk meng-embeded suatu halaman website. Biasanya ukuran Iframe harus kita buat secara static seperti contoh dibawah :
<iframe src="https://www.melihatdunia.com" id="iframeList" width="100%" height="4500px" frameborder="0" scrolling="no" horizontalscrolling="no" verticalscrolling="no"></iframe>
Tapi bagaimana kalau kita membutuhkan ukuran yang lebih dinamis tanpa harus men-setting tinggi Iframe secara static ?
Ada 2 cara untuk membuat ukuran Iframe secara otomatis, jadi ukuran Iframe akan sesuai dengan content yang ada di dalam Iframe
Iframe Dengan Domain Yang Sama
Tinggi dan lebar Iframe bisa dibaca melalui properti contentDocument.body.scrollHeight
dan contentDocument.body.scrollWidth
Contohnya :
Pada halaman parent, masukkan code berikut :
<iframe src="child.html" id="child-iframe"></iframe>
<script>
let iframe = document.querySelector("#child-iframe");
iframe.addEventListener('load', function() {
iframe.style.height = iframe.contentDocument.body.scrollHeight + 'px';
iframe.style.width = iframe.contentDocument.body.scrollWidth + 'px';
});
</script>
Iframe Dalam Domain Yang Berbeda (Cross Domain)
Halaman Iframe mengirim data tinggi dan lebar ke halaman parent dengan menggunakan postMessage().
Contohnya :
Pada halaman Iframe, masukkan code berikut :
window.addEventListener('load', function() {
let message = { height: document.body.scrollHeight, width: document.body.scrollWidth };
// window.top refers to parent window
window.top.postMessage(message, "*");
});
Pada halaman parent, masukkan code berikut :
<iframe src="https://cross-domain.com/child.html" id="child-iframe"></iframe>
<script>
let iframe = document.querySelector("#child-iframe");
window.addEventListener('message', function(e) {
// message that was passed from iframe page
let message = e.data;
iframe.style.height = message.height + 'px';
iframe.style.width = message.width + 'px';
} , false);
</script>
Oke, itu 2 cara yang bisa kita lakukan untuk mendapat ukuran Iframe yang dinamis. referansinya bisa dilihat di : https://usefulangle.com/post/65/javascript-automatically-resize-iframe