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>
Daftar Isi
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
Attribute | Value | Deskripsi |
Allow | Fitur yang mengizinkan tag <iframe> | |
allowfullscreen | true/false | True berarti Iframe bisa ditampilkan fullscreen |
allowpaymentrequest | true/false | Iframe bisa digunakan untuk kepelruan pembayaraan online seperti Paypal, Payonerr dan sejenisnya dengan memasukkan API sistem pembayaran |
heigth | px, % | Ukuran tinggi kotak, secara default terset di 150 px |
width | px, % | Ukuran lebar kotak, secara default terset di 300 px |
Name | text | memberikan nama pada kotak iframe |
src | URL | Alamat sumber yang ingin ditampilkan |
srcdoc | HTML_code | kode untuk menampilkan sumber dari HTML laman tertentu |
referrerpolicy | no-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.