Ahmad Dahlan God does not play dice with the Cosmos.

Tag HTML Iframe – Pengertian dan Penggunaanya

1 min read

Tag Inline Frame HTML

Ahmaddahlan.NET – Iframe adalah salah satu tag HTML tipe desain. Kegunaan iframe (inline frame) ini seperti memberikan jendela pada layar laman anda, dimana layar tersebut menampilkan konten dari website orang lain.

Mengapa tag Iframe perlu? Beberapa website developer yang tidak ingin server mereka dibebani dengan aplikasi berat seperti Pemutar Video atau Penampil document bisa menggunakan website pihak ketiga yang lebih handal dari sisi Server dan aplikasi kemudian setelah diembed ke laman website sendiri melalui tag HTML Iframe.

Misalnya saja video yang tayang di media Youtube atau Document dari Google Doc. Tag Iframe cukup sederhana dan bisa ditambahkan CSS yaknai <iframe>…</iframe>

Penggunaan Tag Iframe

Iframe digunakan dengan tag sederhana

<iframe src="alamatsitus.com"></iframe>

Seperti contoh penggunaan Iframe dari Video YouTuber berikut :

<iframe width=100% height="400" src="https://www.youtube.com/embed/s4BibernJxU" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Perhatikan tangan width=100% ini adalah css untuk menampilkan lebar Iframe responsive terhadap device dimana lebarnya akan seukuran dengan lebar device, jika ingin ditampilkan fix angka 100% diganti dengan “600” untuk ukuran 600 pixel.

Hasilnya sebagai berikut :

Tag Iframe ini bisa berjalan dengan lancar di browser Chrome, Safari, Mozilla, Internet Explorer, Opera dan beberapa browser populer lainnya.

HTML Atribute yang berlaku untuk Tag Iframe

AttributeValueDeskripsi
AllowFitur yang mengizinkan tag <iframe>
allowfullscreentrue/falseTrue berarti Iframe bisa ditampilkan fullscreen
allowpaymentrequesttrue/falseIframe bisa digunakan untuk kepelruan pembayaraan online seperti Paypal, Payonerr dan sejenisnya dengan memasukkan API sistem pembayaran
heigthpx, %Ukuran tinggi kotak, secara default terset di 150 px
widthpx, %Ukuran lebar kotak, secara default terset di 300 px
Nametextmemberikan nama pada kotak iframe
srcURLAlamat sumber yang ingin ditampilkan
srcdocHTML_codekode untuk menampilkan sumber dari HTML laman tertentu
referrerpolicyno-referrer
no-referrer-when-downgrade
origin
origin-when-cross-origin
same-origin
strict-origin
strict-origin-when-cross-origin
unsafe-url

Bentuk lain dari tag Iframe

<iframe src="alamatsitus.com" width="100%" height="300" style="border:1px solid black;">
</iframe>

<iframe src="alamatsitus.com" width="100%" height="300" style="border:none;">
</iframe>

Ancaman dan Keamanan Iframe

Penggunaan TAG Iframe sama sekali tidak memberikan ancaman keamaan baik dari sisi Webiste dan User. Hanya saja Link yang diembed haruslah dari sumber aman, karena keamaanan user dikembalikan pada situs yang dirujuk.

Ahmad Dahlan God does not play dice with the Cosmos.

Desain User Interface dan User Experience

Desain User Interface dan User Experience adalah kompetensi gabungan antara teknis dan seni dalam meramu tampilan antar muka aplikasi dan website. Desain ini menjadi...
Ahmad Dahlan
5 min read

Tinggalkan Balasan