Sisipkan konten dari web lain (misalnya video YouTube, peta Google Maps, atau halaman lain) langsung ke halaman web-mu pakai iFrame.
16m bacaanKuis WajibMicro Badge Lesson
Oke, kita lanjut ke <iframe>! Ini kayak punya "jendela" di halaman web-mu yang bisa nampilin konten dari halaman web lain. Berguna banget buat nyisipin peta, video dari platform lain, atau bahkan bagian dari website lain.
iFrame HTML: 'Jendela Ajaib' ke Dunia Lain di Halamanmu!
Pernah liat video YouTube nongol di tengah artikel blog? Atau peta Google Maps yang nyempil di halaman kontak sebuah website? Nah, kemungkinan besar itu semua pake <iframe> (singkatan dari Inline Frame).
<iframe> itu kayak ngebikin "jendela" atau "bingkai" di dalem halaman web-mu, dan di dalem jendela itu, kamu bisa nampilin konten dari halaman web lain secara utuh. Konten yang ditampilin di dalem iframe itu sebenernya independen, punya dokumen HTML, CSS, dan JavaScript-nya sendiri.
Struktur Dasar Tag <iframe>
Cara paling dasar buat pake <iframe> adalah dengan ngasih tau sumber (URL) konten yang mau ditampilin lewat atribut src.
html
<iframe src="URL_halaman_yang_mau_ditampilkan"> <!-- Teks atau konten fallback ini akan tampil jika browser tidak mendukung iframe --> Maaf, browser Anda tidak mendukung iframe.</iframe>
Tag <iframe>: Pembungkus utama.
Atribut src (Source): Wajib ada. Ini adalah URL dari halaman web yang mau kamu "sematin" (embed) ke dalam iframemu. Bisa URL absolut (misal, dari YouTube, Google Maps) atau URL relatif (halaman lain di situsmu sendiri, tapi ini jarang dipake karena ada cara lain yang lebih baik buat nyisipin konten internal).
Teks Fallback: Konten di antara <iframe> dan </iframe> bakal tampil kalau browser pengguna gak ngedukung iframe (kasus yang udah jarang banget ditemuin di browser modern).
Atribut-Atribut Penting <iframe>
Selain src, ada beberapa atribut lain yang sering dipake buat ngatur tampilan dan perilaku iframe:
width dan height:
Nentuin dimensi (lebar dan tinggi) jendela iframe dalam pixel (atau persentase, tapi pixel lebih umum).
Sangat disarankan buat ngasih nilai width dan height biar browser tau seberapa besar area yang harus disiapin buat iframe, jadi layout gak "loncat-loncat".
frameborder: (Sebenarnya udah deprecated di HTML5, tapi masih sering ditemuin dan kadang masih ngefek di beberapa browser).
Nentuin apakah iframe punya border atau enggak.
Nilainya biasanya "0" (tanpa border) atau "1" (dengan border default browser).
Cara yang lebih modern dan disarankan buat ngilangin border adalah pake CSS: iframe { border: none; } atau iframe { border: 0; }.
html
<!-- Cara lama (hindari jika bisa) --><iframe src="map.html" width="500" height="300" frameborder="0"></iframe><!-- Cara baru (via CSS) akan lebih baik -->
allowfullscreen:
Atribut boolean. Kalau ada, konten di dalem iframe (misalnya, video) diizinin buat masuk ke mode fullscreen pas tombol fullscreen-nya diklik.
Ini penting banget kalau kamu nge-embed video player dari YouTube, Vimeo, dll.
html
<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube video player" frameborder="0" allow
name:
Ngasih nama ke iframe. Nama ini bisa dipake sama link (<a target="nama_iframe">) buat ngebuka link di dalem iframe tersebut, atau sama JavaScript buat ngakses iframe-nya.
Sangat penting buat aksesibilitas! Atribut title di <iframe> ngasih deskripsi singkat soal konten iframe buat pengguna screen reader. Tanpa title yang jelas, pengguna screen reader bakal bingung iframe itu isinya apa.
Contoh dari YouTube di atas udah bener: title="YouTube video player". Kalau embed peta, bisa title="Peta Lokasi Kantor Kami via Google Maps".
Bisa diset ke "lazy" buat lazy loading iframe. Artinya, iframe (dan konten di dalemnya) baru bakal di-load sama browser pas udah mau deket atau masuk ke viewport (area yang keliatan di layar pengguna). Ini bisa ningkatin performa loading awal halaman, terutama kalau iframenya banyak atau ada di bagian bawah halaman.
Nerapin batasan keamanan ekstra ke konten iframe buat ngurangin risiko kalau konten yang di-embed itu gak sepenuhnya dipercaya. Kamu bisa nentuin izin apa aja yang boleh (misal, allow-scripts, allow-same-origin, allow-popups). Ini topik yang cukup dalem.
Contoh Penggunaan Umum <iframe>
Embed Video dari YouTube, Vimeo, dll.:
Platform video biasanya nyediain kode embed <iframe> yang udah siap kamu copy-paste.
html
<!-- Contoh dari YouTube --><iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID_DISINI" title="Judul Video YouTube yang Deskriptif" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Embed Peta dari Google Maps:
Google Maps juga punya fitur "Share" -> "Embed a map" yang ngasih kamu kode <iframe>.
Embed Konten Media Sosial (Twitter, Facebook, Instagram post):
Banyak platform medsos juga nyediain opsi embed yang pake <iframe> atau JavaScript yang nge-generate <iframe>.
Pertimbangan Keamanan dan Performa Saat Pake <iframe>
Meskipun <iframe> itu berguna, ada beberapa hal yang perlu kamu perhatiin:
Keamanan (Security):
Konten Tidak Dipercaya: Hati-hati banget kalau mau nge-embed konten dari situs yang gak kamu kenal atau gak kamu percaya. Konten di dalem iframe bisa aja jahat (misal, nyoba phishing, jalanin skrip berbahaya). Atribut sandbox bisa bantu ngurangin risiko ini.
Clickjacking: Ini serangan di mana pengguna "ditipu" buat ngeklik sesuatu di iframe yang transparan yang nutupin tombol lain di halamanmu. Walaupun browser modern punya proteksi, tetep waspada.
Performa:
Setiap <iframe> itu kayak ngebuka halaman web baru di dalem halamanmu. Jadi, makin banyak iframe, atau iframe yang isinya berat, makin lambat loading halaman utamamu.
Gunakan loading="lazy" buat iframe yang gak langsung keliatan pas halaman dibuka.
Pertimbangkan apakah bener-bener butuh iframe, atau ada cara lain (misal, pake API dari layanan tersebut) buat nampilin datanya.
SEO:
Konten di dalem <iframe> itu dianggap "milik" domain asal iframe tersebut, bukan milik halamanmu. Jadi, jangan ngandelin iframe buat nambahin konten penting yang pengen kamu rangking di Google. Google mungkin bisa ngindeks konten iframe, tapi biasanya diatribusiin ke sumber aslinya.
Styling Terbatas:
Kamu gak bisa ngasih style CSS dari halaman utamamu ke konten di dalam iframe kalau iframenya beda domain (karena Same-Origin Policy). Kamu cuma bisa ngatur tampilan iframe-nya sendiri (lebar, tinggi, border).
Kapan Sebaiknya TIDAK Pake <iframe>?
Buat navigasi utama situsmu: Jangan pernah! Ini praktik buruk banget.
Buat nyisipin header atau footer yang sama di semua halaman: Pake server-side includes (PHP, dll.) atau JavaScript framework buat ini.
Kalau ada API yang lebih baik: Banyak layanan (kayak Twitter, Facebook, bahkan Google Maps) nyediain API JavaScript yang lebih fleksibel dan performanya lebih bagus daripada cuma nge-embed iframe mentah.
<iframe> itu alat yang cukup powerful buat nambahin fungsionalitas atau konten eksternal ke websitemu. Tapi, kayak alat powerful lainnya, gunain dengan bijak dan pahami implikasi keamanan serta performanya. Pastikan kamu cuma nge-embed konten dari sumber yang kamu percaya dan selalu kasih title yang deskriptif!
Selanjutnya, kita bakal ngintip lebih dalem lagi isi dari tag <head>, karena ternyata gak cuma <title> aja lho isinya!
Checkpoint KuisTarget: 70%
Kuis iFrame HTML
Kuis ini wajib untuk sertifikat. Kamu tetap bisa lanjut ke pelajaran berikutnya dan mengerjakannya nanti.
(Perhatikan juga ada atribut allow di contoh YouTube, ini buat ngatur fitur apa aja yang diizinin di iframe. Ini lebih advanced dan terkait Permissions Policy).
=
"jendelaKonten"
>Buka Halaman Satu di atas</
a
> |
<a href="halaman-dua.html" target="jendelaKonten">Buka Halaman Dua di atas</a>
</p>
title
=
"Peta Interaktif Lokasi Acara"
></
iframe
>
loading="lazy"
referrerpolicy="no-referrer-when-downgrade"
title="Peta Monumen Nasional">
</iframe>
(Perhatikan atribut style="border:0;" ini cara Google Maps ngilangin border, dan ada referrerpolicy buat privasi).
