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