Panduan Lengkap Kode HTML dan JavaScript untuk Iframe

Juli 02, 2025 Posting Komentar

<iframe> atau inline frame adalah elemen HTML yang digunakan untuk menampilkan halaman web lain di dalam halaman kita. Dengan kata lain, iframe memungkinkan kita "menyematkan" website lain ke dalam website kita.

Contoh sederhananya seperti ini:

<iframe src="https://www.example.com" width="600" height="400"></iframe>

Kode di atas akan menampilkan halaman example.com di dalam ukuran frame 600x400 piksel.

Struktur Dasar Kode HTML Iframe

Berikut elemen-elemen penting yang bisa kamu atur:

<iframe
  src="https://example.com"
  width="100%"
  height="500"
  frameborder="0"
  allowfullscreen
  loading="lazy"
  title="Contoh Iframe">
</iframe>

Penjelasan atribut:

src: URL yang ingin ditampilkan.
width dan height: Ukuran iframe.
frameborder: 0 untuk tanpa border.
allowfullscreen: Izin untuk fullscreen (khusus video).
loading="lazy": Menunda load iframe sampai dibutuhkan.
title: Deskripsi iframe untuk SEO dan aksesibilitas.

Mengontrol Iframe dengan JavaScript

Iframe bisa dikontrol dengan JavaScript, terutama jika kita ingin:

Mengubah URL iframe secara dinamis.
Menyembunyikan / menampilkan iframe.
Mengatur tinggi atau lebar secara responsif.
Berinteraksi dengan isi iframe (jika dari domain yang sama).

1. Mengubah URL Iframe dengan JavaScript

<iframe id="myFrame" src="https://example.com" width="600" height="400"></iframe>

<button onclick="gantiIframe()">Ganti URL</button>

<script>
  function gantiIframe() {
    document.getElementById('myFrame').src = 'https://wikipedia.org';
  }
</script>

2. Menyembunyikan atau Menampilkan Iframe

<button onclick="toggleIframe()">Tampilkan/Sembunyikan</button>

<script>
  function toggleIframe() {
    var iframe = document.getElementById('myFrame');
    if (iframe.style.display === 'none') {
      iframe.style.display = 'block';
    } else {
      iframe.style.display = 'none';
    }
  }
</script>

Menyesuaikan Ukuran Iframe Secara Dinamis

Bisa menggunakan JavaScript untuk mengubah ukuran:

document.getElementById('myFrame').style.height = '800px';

Atau bisa buat iframe responsive dengan CSS:

.responsive-iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.iframe-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* aspek rasio 16:9 */
  height: 0;
}

.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Dan HTML-nya:

<div class="iframe-container">
  <iframe src="https://youtube.com/embed/xxxxx" class="responsive-iframe"></iframe>
</div>

Keterbatasan dan Keamanan Iframe

Cross-Origin Policy: Kamu tidak bisa mengakses isi iframe jika berasal dari domain berbeda.
CSP dan X-Frame-Options: Beberapa website tidak mengizinkan dirinya ditampilkan dalam iframe.
SEO: Konten iframe tidak akan terbaca oleh mesin pencari sebagai bagian dari konten utama.
Penggunaan berlebihan iframe bisa memperlambat website.

Kesimpulan

Iframe sangat berguna untuk menanamkan konten dari luar seperti peta, video, atau tampilan web lain. Namun penggunaannya perlu bijak karena menyangkut performa dan keamanan. Dengan JavaScript, kita bisa membuat iframe menjadi lebih interaktif dan dinamis.

Jika kamu membuat situs atau blog dan ingin menyisipkan tools, kalkulator, atau formulir dari layanan lain, iframe adalah solusi cepat dan mudah. Namun, pastikan kamu memahami batasannya.

Istrukturkode Blog