Blog

Apa Itu iFrame? Pengertian, Fungsi, dan Contoh Script iFrame HTML Lengkap

Contents hide

1 Apa Itu iFrame?

2 Fungsi iFrame dalam Website

3 Struktur Dasar Tag iFrame

4 Atribut Penting pada iFrame

5 Contoh Script iFrame HTML

6 Cara Membuat iFrame Responsive

7 Kelebihan Menggunakan iFrame

8 Kekurangan iFrame

9 Risiko Keamanan iFrame

10 Perbedaan iFrame dan Embed

11 Apakah iFrame Masih Digunakan?

12 Kesimpulan

Apa Itu iFrame?

iFrame (Inline Frame) adalah elemen HTML yang digunakan untuk menampilkan halaman web lain di dalam sebuah halaman web. Dengan iFrame, Anda bisa menyematkan (embed) konten eksternal seperti video, peta, dokumen, atau bahkan halaman website lain tanpa harus meninggalkan halaman utama.

Elemen ini menggunakan tag <iframe> dalam HTML dan sangat umum digunakan untuk integrasi konten pihak ketiga.

Secara sederhana, iFrame memungkinkan satu halaman web memuat halaman web lainnya di dalamnya.

Fungsi iFrame dalam Website

Berikut beberapa fungsi utama iFrame dalam pengembangan website:

1. Menampilkan Konten Eksternal

iFrame sering digunakan untuk menampilkan:

Video YouTube
Google Maps
Form eksternal
Dokumen PDF
Halaman landing page tertentu

2. Integrasi Layanan Pihak Ketiga

Banyak layanan menyediakan kode embed berbasis iFrame untuk mempermudah integrasi.

Contohnya:

Penyematan video dari YouTube
Penyematan peta dari Google Maps

3. Isolasi Konten

iFrame membuat konten yang ditampilkan berjalan dalam konteks terpisah, sehingga tidak langsung memengaruhi struktur utama halaman.

Struktur Dasar Tag iFrame

Berikut contoh struktur dasar iFrame:

Namun dalam praktiknya, biasanya ditambahkan beberapa atribut penting.

Atribut Penting pada iFrame

Atribut	Fungsi
src	URL halaman yang ingin ditampilkan
width	Lebar iFrame
height	Tinggi iFrame
title	Deskripsi untuk aksesibilitas
frameborder	Mengatur border (HTML5 sudah deprecated)
allowfullscreen	Mengizinkan mode fullscreen
loading	Lazy loading (lazy/eager)
sandbox	Membatasi kemampuan konten dalam iFrame

Contoh Script iFrame HTML

1. Contoh iFrame Menampilkan Website

<iframe

src=“https://example.com”

width=“800”

height=“400”

title=“Contoh Website”>

</iframe>

2. Contoh iFrame YouTube

3. Contoh iFrame Google Maps

<iframe

src=“https://www.google.com/maps/embed?pb=…”

width=“600”

height=“450”

style=“border:0;“

allowfullscreen=“”

loading=“lazy”>

</iframe>

4. Contoh iFrame PDF

<iframe

src=“file.pdf”

width=“100%”

height=“500px”>

</iframe>

Cara Membuat iFrame Responsive

Agar iFrame responsif (menyesuaikan layar), gunakan CSS berikut:

.responsive-iframe iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>

Teknik ini menjaga rasio 16:9 agar tetap proporsional.

Kelebihan Menggunakan iFrame

Mudah mengintegrasikan konten eksternal
Tidak perlu menyalin seluruh kode sumber
Mendukung berbagai jenis media
Praktis untuk embed layanan pihak ketiga

Kekurangan iFrame

Bisa memperlambat loading jika terlalu banyak
Risiko keamanan jika memuat situs tidak terpercaya
SEO kurang optimal karena konten dianggap terpisah
Tidak semua website mengizinkan ditampilkan dalam iFrame

Risiko Keamanan iFrame

iFrame bisa disalahgunakan untuk:

Clickjacking
Phishing
Inject konten berbahaya

Untuk keamanan, gunakan atribut sandbox:

Atau batasi izin:

sandbox=”allow-scripts allow-same-origin”

Perbedaan iFrame dan Embed

iFrame	Embed
Memuat halaman lain	Biasanya untuk media tertentu
Lebih fleksibel	Lebih spesifik
Bisa memuat seluruh halaman	Umumnya file multimedia

Apakah iFrame Masih Digunakan?

Ya, iFrame masih banyak digunakan, terutama untuk:

Embed video
Embed maps
Widget pembayaran
Sistem login pihak ketiga
Dashboard eksternal

Namun untuk aplikasi modern, beberapa developer memilih menggunakan API atau AJAX sebagai alternatif.

Kesimpulan

iFrame adalah elemen HTML yang memungkinkan Anda menampilkan halaman web atau konten eksternal di dalam halaman website. Penggunaannya sangat umum untuk embed video, peta, dan dokumen. Meski praktis, penggunaan iFrame harus mempertimbangkan aspek keamanan dan performa.

Dengan konfigurasi yang tepat dan penggunaan atribut seperti sandbox serta loading="lazy", iFrame tetap menjadi solusi efektif untuk integrasi konten eksternal dalam pengembangan website modern. Jika digunakan dengan benar, iFrame dapat meningkatkan fleksibilitas dan fungsionalitas website tanpa harus membangun semuanya dari awa