Tag iframe
Tag iframe memungkinkan untuk menyematkan konten dari satu situs ke situs lainnya. Tag ini digunakan untuk menampilkan konten, seperti video, gambar, atau artikel, tanpa perlu membuka jendela atau tab baru.
Konten dari situs yang disematkan akan memiliki
desain dari situs tersebut. Dalam hal ini, gaya CSS
dari situs kita, serta kode JavaScript kita
tidak akan mempengaruhi konten di dalam tag iframe.
JavaScript kita dapat diterapkan ke konten iframe,
namun untuk melakukannya diperlukan metode-metode
khusus.
Tag iframe banyak digunakan di situs-situs untuk menyematkan video dari YouTube dan platform lainnya, serta untuk menampilkan artikel dan gambar dari sumber lain.
Atribut
| Atribut | Keterangan |
|---|---|
src |
Menentukan alamat halaman yang akan disematkan. |
srcdoc |
Memungkinkan untuk mengatur konten iframe langsung di dalam atribut. |
frameborder |
Mengatur bingkai di sekitar iframe.
Nilai yes mengatur bingkai (default),
dan nilai no menghilangkan bingkai.
|
scrolling |
Mengatur scroll bar di dalam iframe.
Nilai auto - scroll bar muncul bila diperlukan (default),
nilai yes - scroll bar selalu muncul,
nilai no - tidak ada scroll bar.
|
Contoh
Mari sematkan iframe dengan situs lain (sebagai contoh, kita ambil code.mu) ke dalam situs kita:
<iframe src="https://code.mu/" width="600" height="400"></iframe>
:
Contoh
Sematkan video dari YouTube ke situs kita:
<iframe
src="https://www.youtube.com/embed/KzQrHpB1H8U"
allowfullscreen
width="400"
height="400">
</iframe>
:
Contoh
Tulis konten langsung di dalam iframe:
<iframe
srcdoc="<h1>judul</h1><p>teks</p>"
width="300"
height="200">
</iframe>
: