HTML element tag <iframe> atau inline frame merupakan tag pada HTML yang digunakan untuk menyertakan dokumen lain di dalam halaman HTML itu sendiri. Dokumen tersebut dapat berupa halaman HTML, script penyedia iklan pihak ketiga, contoh kode program, ataupun media berupa video, audio dan gambar. Bagi kalangan video bloger, iframe banyak digunakan untuk menyisipkan konten video didalam halaman webnya misalnya video dari youtube, facebook dan lainnya.
Tag <iframe> akan menghasilkan suatu frame window independen yang mengambang yang berisi dokumen lain di dalam dokumen html itu sendiri. <Iframe> memungkinkan Anda untuk menampilan suatu halaman lain yang berada di luar halaman kita. Anda dapat menggunakan atribut src sebagai sumber rujukan dokumen lain yang akan ditampilkan. Atribut width memberikan nilai lebar iframe dalam satuan piksel dan atribut height memberikan nilai tinggi iframe tersebut dengan satuan piksel.
Menyertakan Konten HTML Ke Dalam <Iframe>
Halaman HTML yang berbentuk terpisah yang independen maupun halaman website utuh dapat dimasukkan ke dalam halaman HTML. Hal ini diperlukan saat anda memiliki tujuan khusus seperti menyisipkan kode-kode tertentu kedalam halaman HTML namun berasal dari tempat yang terpisah. Berikut contoh menggunakan elemen <iframe> yang berasal dari sumber "https://www.saidalfaruq.net/html/tag-pre-preformatted-text-pada-html-y8z6ax0t"
HTML
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
<title>Belajar Menggunakan HTML Element Tag IFRAME (inline frame)</title>
</head>
<body>
<h1>Latihan Menggunakan HTML Element Tag IFRAME (inline frame)</h1>
<iframe width="560" height="315" src="https://www.saidalfaruq.net/html/tag-pre-preformatted-text-pada-html-y8z6ax0t" frameborder="0" allowfullscreen></iframe>
</body>
</html>
Jika dijalankan akan menghasilkan tampilan seperti di bawah ini :
Dari contoh diatas, tag <iframe> memungkinkan pengguna untuk berinteraksi secara independen terhadap halaman HTML yang disertakan. Seperti menelusuri banyak tautan, berpindah dari link satu dengan lainnya tanpa harus keluar dari halaman HTML utama.
Menyertakan Konten Youtube Ke Dalam <Iframe>
Untuk menyertakan konten video yang berasal dari media sosial seperti Youtube, Facebook dan lainnnya cukup dengan menyebutkan sumber dalam bentuk URL yang ditulis di dalam atribut src. Hal yang perlu dipahami adalah terdapat beberapa versi URL yang selalu digunakan oleh youtube. Misalnya :
URL = "https://www.youtube.com/watch?v=RG9TMn1FJzc"
URL = "https://youtu.be/RG9TMn1FJzc"
URL = "https://www.youtube.com/embed/RG9TMn1FJzc"
Ketiga URL di atas mengacu pada halaman yang sama. Untuk menyertakan konten video youtube ke dalam sebuah <iframe> silahkan gunakan format penulisan URL yang terakhir.
Berikut ini contoh penggunaannya :
HTML
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
<title>Belajar Menggunakan HTML Element Tag IFRAME (inline frame)</title>
</head>
<body>
<h1>Latihan Menggunakan HTML Element Tag IFRAME (inline frame)</h1>
<iframe width="560" height="315" src="https://www.youtube.com/embed/RG9TMn1FJzc" frameborder="0" allowfullscreen></iframe>
</body>
</html>
Jika dijalankan akan menghasilkan tampilan seperti di bawah ini :
Atribut Khusus
Atribut khusus pada tag <iframe> meliputi :
Browser Pendukung :
| Elemen |  |  |  |  |  |
| <iframe> | ya | ya | ya | ya | ya |
Global Attributes :
Tag <iframe> mendukung Global Atribut di dalam HTML yang artinya bahwa pada tag ini dapat sisipkan atribut yang bersifat global yang secara umum berlaku pada semua komponen tag HTML.
Silahkan kunjungi Atribut Global Pada HTML untuk mengetahui detail global atribut pada HTML
Event Attributes :
Tag <iframe> mendukung Event Atribut atau atribut acara (kejadian). Atribut acara ini merupakan wilayah javascript tentang bagaimana menampilkan halaman web. Misalnya saat halaman web sedang loading (onload) sampai interaksi user pada halaman web tersebut seperti scrolling layar (onscroll), menekan tombol pada keyboard (onkeypress, onkeydown), mengarahkan mouse (onmouseover) dan lainnya.
Silahkan kunjungi Event Atribut Pada HTML untuk mengetahui detail event atribut pada HTML.
Pengaturan Default CSS :
Nilai default pengaturan gaya untuk elemen <iframe> pada HTML:
CSS
1
2
3
4
5
6
7
8
Previous Pageiframe{
iframe:focus {
outline: none;
}
iframe[seamless] {
display: block;
}
}
Catatan : <Iframe> dapat membantu mengurangi beban penggunaan media penyimpanan dihosting misalnya konten yang berasal dari youtube. Karena file tersebut berasal dari youtube otomatis juga disimpan di server youtube. Namun <iframe> juga memiliki kerawanan dalam faktor keamanan. Anda harus benar-benar tahu keamanan dari situs tempat diletakkan file tersebut. Karena konten dalam <iframe> dapat disisipi malware yang bisa mengganggu halaman wesite anda.
Halaman Terkait
 | Tag <object> Pada HTML html |
| Tag <embed> Pada HTML html |
Tutorial HTML
Paling Banyak Dibaca
News Letters
Silahkan masukkan email Anda untuk berlangganan informasi kami
