Beranda
IFrame Viewer

IFrame Viewer

Akhmad Syahroni
Maret 26, 2025
0 Komentar

Elemen <iframe> (inline frame) adalah elemen HTML yang digunakan untuk menyematkan halaman web lain atau konten eksternal di dalam halaman web utama. Elemen ini berfungsi seperti jendela kecil yang menampilkan dokumen lain, sering kali dari domain yang berbeda.

Contoh Sintaks Dasar

        <iframe src="https://example.com" width="600" height="400"></iframe>

Atribut Umum

  • src: Menentukan URL halaman yang akan ditampilkan.
  • width & height: Mengatur ukuran iframe (bisa diatur dengan CSS juga).
  • frameborder="0": Menghilangkan batas/frame di sekitar iframe.
  • allowfullscreen: Mengizinkan tampilan layar penuh.
  • referrerpolicy="strict-origin-when-cross-origin": Mengontrol bagaimana data referer dikirim.
  • allow: Memberikan izin khusus seperti autoplay, akses clipboard, dll.

Elemen <iframe> adalah elemen HTML yang digunakan untuk menyematkan halaman web lain di dalam dokumen HTML. Iframe memungkinkan konten dari sumber eksternal dimuat dalam halaman tanpa perlu meninggalkan halaman utama. Elemen ini sering digunakan untuk menampilkan video, peta, atau dokumen lain dalam suatu halaman web.

Atribut Deskripsi
src Menentukan URL halaman yang akan dimuat dalam iframe.
srcdoc Menentukan HTML yang akan dirender langsung dalam iframe.
name Menentukan nama unik untuk iframe, berguna untuk navigasi target.
width Menentukan lebar iframe dalam piksel atau persentase.
height Menentukan tinggi iframe dalam piksel atau persentase.
sandbox Memberikan batasan keamanan pada iframe, mencegahnya menjalankan skrip atau mengakses data sensitif. Nilai opsional:
  • allow-forms: Mengizinkan pengisian dan pengiriman formulir.
  • allow-modals: Mengizinkan penggunaan modal (pop-up).
  • allow-popups: Mengizinkan pembukaan jendela pop-up.
  • allow-same-origin: Mengizinkan akses ke sumber yang sama.
  • allow-scripts: Mengizinkan eksekusi JavaScript.
allowfullscreen Mengizinkan iframe masuk ke mode layar penuh.
referrerpolicy Menentukan bagaimana informasi referer dikirim ke sumber eksternal. Nilai opsional:
  • no-referrer: Tidak mengirim referer sama sekali.
  • origin: Mengirim hanya asal domain.
  • same-origin: Mengirim referer hanya jika sumber dan tujuan berada di domain yang sama.
allow Mengontrol fitur tambahan dalam iframe. Nilai opsional:
  • accelerometer: Mengizinkan akses ke akselerometer perangkat.
  • autoplay: Mengizinkan pemutaran otomatis media.
  • clipboard-write: Mengizinkan penulisan ke clipboard.
  • encrypted-media: Mengizinkan pemutaran media terenkripsi.
  • gyroscope: Mengizinkan akses ke sensor gyroscope.
  • picture-in-picture: Mengizinkan mode picture-in-picture.
frameborder (deprecated) Menentukan apakah iframe memiliki batas atau tidak (gunakan CSS sebagai gantinya).
scrolling (deprecated) Menentukan apakah scrollbar diizinkan (yes, no, auto).
loading Menentukan kapan iframe dimuat: eager (langsung) atau lazy (ditunda sampai mendekati viewport).

Berikut contoh penggunaan elemen <iframe> dalam HTML: 


<iframe 
    src="https://example.com" 
    width="600" 
    height="400" 
    name="exampleFrame" 
    sandbox="allow-scripts allow-same-origin"
    referrerpolicy="strict-origin"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    frameborder="0"
    loading="lazy"
    allowfullscreen>
</iframe>

Kegunaan

  • Menyematkan video (misalnya dari YouTube atau Vimeo).
  • Menampilkan widget pihak ketiga (peta, media sosial, dll.).
  • Memuat situs eksternal di dalam halaman web.
  • Menjalankan konten dalam lingkungan sandbox untuk keamanan (menggunakan atribut sandbox).

Contoh Penggunaan

Menyematkan video dari YouTube:

        <iframe 
            width="560" 
            height="315" 
            src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
            frameborder="0" 
            allowfullscreen>
        </iframe>

Hasil Contoh

CREDIT: Halaman ini adalah fitur khusus untuk menampilkan berbagai iframe yang dibagikan di ASIBUKA. Fitur di laman ini hanya bisa diakses melalui link tertentu. Jika langsung dibuka, maka laman ini tidak akan menampilkan iframe apapun dan hanya akan menampilkan artikel tentang Iframe. Fitur ini dibuat oleh ASIBUKA.

Penulis blog

Akhmad Syahroni
Akhmad Syahroni
Entrepreneur Pemula | Pegiat UMKM | Blogger @ ASIBUKA Blog | Admin @ Indo Mitra

Featured Post