HTML iframe tag | belajar <iframe> element

HTML Fadlullah Fadul December 3, 2018

Referensi Belajar HTML iframe tag. Tutorial dan panduan mengenai element <iframe>...</iframe> yang digunakan untuk menyisipkan dokumen lain dalam dokumen yang bersangkutan. Mencakup pembahasan lebih detail dan lengkap yang disertai contoh kode penggunaan sebagai rujukan untuk materi belajar HTML elemen <iframe>.

Deskripsi
Penjelasan HTML iframe tag

HTML <iframe> element digunakan untuk merepresentasikan konteks jelajah dari sebuah dokumen atau file lain untuk dimasukkan (embed) dalam dokumen yang bersangkutan.

<iframe> element sering digunakan untuk menyisipkan konten dari website lain, contohnya menyisipkan script iklan dari website pihak ketiga, memasukkan widget atau aplikasi tertentu, dan memasukkan video dari sumber lain (seperti Youtube, Vimeo dan sejenisnya).

Attributes
Atribut HTML Tag <iframe>

sandbox

Membolehkan batasan-batasan tambahan untuk konten dalam sebuah iframe.

Value:

  • allow-forms
  • allow-pointer-lock
  • allow-popups
  • allow-same-origin
  • allow-scripts
  • allow-top-navigation
seamless

Menentukkan bahwa <iframe> harus nampak seperti bagian dari konten dalam dokumen tersebut.

Value: seamless

src

Menentukkan sumber (url) dokumen atau file yang akan disisipkan pada sebuah <iframe>.

Value: url

srcdoc

Menentukkan konten halaman HTML yang akan ditampilkan dalam sebuah <iframe>.

Value: HTML_code (kode HTML)

width

Menentukkan lebar dari sebuah <iframe>.

Value: pixels

Global Attributes
Atribut Secara Global (Keseluruhan)

<iframe> tag mencakup global attributes, yang artinya tag tersebut dapat disisipkan semua attributes yang termasuk dalam global attributes yang secara umum berlaku untuk semua HTML tags.

Silahkan, lihat referensi mengenai HTML Global Attribute

Event Attributes
Atribut event (Peristiwa)

<iframe> tag mencakup event attributes, yang artinya attribute tersebut dijalankan ketika ada interaksi dari user atau dalam suatu peristiwa (kejadian). Contoh: menjalankan script (JavaScript) ketika halaman web pada jendela browser hendak ditutup, dan lain sebagainya.

Silahkan, lihat referensi mengenai HTML Events Attribute

Example
Contoh HTML <iframe> element

Contoh 1
SOURCE
editor 
<iframe id="kalkulator" src="/media/files/calculator.html"></iframe>

Contoh kalkulator diatas diambil dari halaman lain (sumber lain dari calculator.html) yang di-embed dalam sebuah iframe element.

Untuk menyamarkan iframe diatas, supaya terlihat seperti terdapat pada dokumen ini (bukan halaman lain), saya menghapus border dan mengaplikasikan style berikut:

CSS 
iframe#kalkulator {
width: 100%;
border:0; /* menghilangkan border */
min-height: 230px;
}
Contoh 2

Pada contoh dibawah ini, menggunakan konten HTML tanpa sumber lain.

SOURCE
editor 
<iframe width="100%" height="100%" seamless sandbox srcdoc="<p>Selamat Datang di apacara.com <br><img src=&quot;/media/images/apple.jpg&quot;>"></iframe>
SHARE
Previous Article Next Article