Ketika menampilkan halaman HTML melalui <iframe>—misalnya dashboard, laporan, tabel interaktif, form, atau aplikasi web kecil—sering terjadi masalah:

• Iframe kepotong
• Iframe terlalu pendek
• Scrollbar ganda muncul
• Konten di dalam berubah tinggi, tapi iframe tidak mengikuti
• Modal, filter, atau DataTables keluar area iframe

Penyebabnya sederhana: iframe tidak bisa mengetahui tinggi konten di dalamnya, terutama jika konten berasal dari domain berbeda (cross-domain).

Solusi paling stabil untuk mengatasi masalah ini adalah menggunakan iframe-resizer, sebuah library kecil dan ringan yang memungkinkan halaman di dalam iframe mengirimkan tinggi aktual ke halaman luar.

Artikel ini membahas cara menggunakannya untuk publik, lengkap dengan script siap pakai.

---

⭐ Apa itu iframe-resizer?

iframe-resizer adalah library JavaScript yang:

• Menyesuaikan tinggi iframe secara otomatis
• Memperbarui tinggi saat konten berubah (pagination, filter, modal, AJAX, dsb.)
• Bekerja cross-domain
• Sangat ringan (~7 KB)
• Kompatibel dengan semua browser modern

Cocok untuk:

• Dashboard interaktif
• Tabel DataTables
• Aplikasi HTML mandiri
• Laporan atau katalog
• Form dinamis
• Halaman statis dari hosting manapun

---

⭐ Cara Menggunakannya

iframe-resizer membutuhkan dua skrip:

1. Script Parent (di halaman yang memuat iframe)
2. Script Child (di halaman HTML yang di-embed)

---

1️⃣ Pasang Script Parent

Ini diletakkan di halaman tempat iframe berada (misalnya WordPress, Blogger, Webflow, HTML statis, dll).

Tempel kode berikut:

<div style="width:100%;max-width:100%;overflow:hidden;">
<iframe
id="autoFrame"
src="URL-HALAMAN-YANG-MAU-DI-EMBED"
style="width:100%;border:0;display:block;"
scrolling="no"
frameborder="0">
</iframe>
</div>
<!-- iframe-resizer parent -->
<script src="https://cdn.jsdelivr.net/npm/iframe-resizer/js/iframeResizer.min.js"></script>
<script>
iFrameResize({
log: false,
checkOrigin: false, // wajib jika berbeda domain
heightCalculationMethod: "max", // paling stabil untuk konten dinamis
warningTimeout: 0
}, "#autoFrame");
</script>

Penjelasan:

• checkOrigin:false → perlu jika sumber iframe dari domain lain
• heightCalculationMethod:"max" → memastikan iframe mengikuti tinggi maksimal halaman
• Tidak perlu height manual

---

2️⃣ Pasang Script Child

Script ini harus ditempel di halaman HTML yang ingin ditampilkan dalam iframe.

Letakkan sebelum </body>:

<!-- iframe-resizer child -->

<script src="https://cdn.jsdelivr.net/npm/iframe-resizer/js/iframeResizer.contentWindow.min.js"></script>

Fungsi:

• Mengirim tinggi halaman ke parent secara otomatis
• Update saat konten berubah
• Tidak perlu konfigurasi tambahan

---

⭐ Contoh Struktur Sederhana

Parent (WordPress atau website utama)

<iframe id="autoFrame" src="https://example.com/dashboard/"></iframe>
<script src="https://cdn.jsdelivr.net/npm/iframe-resizer/js/iframeResizer.min.js"></script>
<script>
iFrameResize({ checkOrigin:false }, "#autoFrame");
</script>

Child (dashboard/index.html)

<script src="https://cdn.jsdelivr.net/npm/iframe-resizer/js/iframeResizer.contentWindow.min.js"></script>

---

⭐ Kelebihan iframe-resizer

---

🧪 Troubleshooting Umum

1. Iframe masih kepotong

Tambahkan fallback kecil di CSS parent:

#autoFrame {
min-height: 900px !important;
height: auto !important;
}

2. Elementor/Divi menetapkan height fixed

Tambahkan:

iframe { height: auto !important; }

3. Child script belum dipasang

Pastikan halaman HTML yang di-embed menyertakan:

<script src="https://cdn.jsdelivr.net/npm/iframe-resizer/js/iframeResizer.contentWindow.min.js"></script>

4. URL iframe salah

Pastikan URL bisa diakses publik.

---

🎯 Kesimpulan

Jika Anda ingin meng-embed halaman interaktif (dashboard, tabel, laporan) tanpa masalah tinggi terpotong, solusi terbaik adalah:

✔ Parent: iframeResizer.min.js

✔ Child: iframeResizer.contentWindow.min.js

Dua baris sederhana, namun hasilnya:

• tampilan mulus
• pengalaman pengguna maksimal
• kompatibel lintas platform
• embed halaman apa pun tanpa stress