<iframe><\/code> dalam HTML dan sangat umum digunakan untuk integrasi konten pihak ketiga.<\/p>\nSecara sederhana, iFrame memungkinkan satu halaman web memuat halaman web lainnya di dalamnya.<\/p>\n
Fungsi iFrame dalam Website<\/h2>\n
Berikut beberapa fungsi utama iFrame dalam pengembangan website:<\/p>\n
1. Menampilkan Konten Eksternal<\/strong><\/p>\niFrame sering digunakan untuk menampilkan:<\/p>\n
\n- \n
Video YouTube<\/p>\n<\/li>\n
- \n
Google Maps<\/p>\n<\/li>\n
- \n
Form eksternal<\/p>\n<\/li>\n
- \n
Dokumen PDF<\/p>\n<\/li>\n
- \n
Halaman landing page tertentu<\/p>\n<\/li>\n<\/ul>\n
2. Integrasi Layanan Pihak Ketiga<\/strong><\/p>\nBanyak layanan menyediakan kode embed berbasis iFrame untuk mempermudah integrasi.<\/p>\n
Contohnya:<\/p>\n
\n- \n
Penyematan video dari YouTube<\/span><\/span><\/p>\n<\/li>\n- \n
Penyematan peta dari Google<\/span><\/span> Maps<\/p>\n<\/li>\n<\/ul>\n3. Isolasi Konten<\/strong><\/p>\niFrame membuat konten yang ditampilkan berjalan dalam konteks terpisah, sehingga tidak langsung memengaruhi struktur utama halaman.<\/p>\n
Struktur Dasar Tag iFrame<\/h2>\n
Berikut contoh struktur dasar iFrame:<\/p>\n
\n\n\n\n\n\n\n\n\n\n<iframe<\/span> src<\/span>=<\/span>“https:\/\/example.com”<\/span>><\/iframe><\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\nNamun dalam praktiknya, biasanya ditambahkan beberapa atribut penting.<\/p>\n
Atribut Penting pada iFrame<\/h2>\n\n\n\n\n\nAtribut<\/th>\n Fungsi<\/th>\n<\/tr>\n<\/thead>\n \n\nsrc<\/td>\n URL halaman yang ingin ditampilkan<\/td>\n<\/tr>\n \nwidth<\/td>\n Lebar iFrame<\/td>\n<\/tr>\n \nheight<\/td>\n Tinggi iFrame<\/td>\n<\/tr>\n \ntitle<\/td>\n Deskripsi untuk aksesibilitas<\/td>\n<\/tr>\n \nframeborder<\/td>\n Mengatur border (HTML5 sudah deprecated)<\/td>\n<\/tr>\n \nallowfullscreen<\/td>\n Mengizinkan mode fullscreen<\/td>\n<\/tr>\n \nloading<\/td>\n Lazy loading (lazy\/eager)<\/td>\n<\/tr>\n \nsandbox<\/td>\n Membatasi kemampuan konten dalam iFrame<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\nContoh Script iFrame HTML<\/h2>\n
1. Contoh iFrame Menampilkan Website<\/strong><\/p>\n\n\n\n\n\n\n\n\n\n\n<iframe<\/span>
\nsrc<\/span>=<\/span>“https:\/\/example.com”<\/span>
\nwidth<\/span>=<\/span>“800”<\/span>
\nheight<\/span>=<\/span>“400”<\/span>
\ntitle<\/span>=<\/span>“Contoh Website”<\/span>><\/span>
\n<\/iframe><\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n2. Contoh iFrame YouTube<\/strong><\/p>\n<iframe<\/span>
\nwidth<\/span>=<\/span>“560”<\/span>
\nheight<\/span>=<\/span>“315”<\/span>
\nsrc<\/span>=<\/span>“https:\/\/www.youtube.com\/embed\/VIDEO_ID”<\/span>
\ntitle<\/span>=<\/span>“YouTube video player”<\/span>
\nframeborder<\/span>=<\/span>“0”<\/span>
\nallowfullscreen<\/span>><\/span>
\n<\/iframe><\/span><\/div>\n\n\n\n\n<\/div>\n<\/div>\n\n![\"https:\/\/www.encodedna.com\/html5\/embed-youtube-video-without-iframe.png\"](\"https:\/\/www.encodedna.com\/html5\/embed-youtube-video-without-iframe.png\")
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n3. Contoh iFrame Google Maps<\/strong><\/p>\n\n\n\n\n\n\n\n<iframe<\/span>
\nsrc<\/span>=<\/span>“https:\/\/www.google.com\/maps\/embed?pb=…”<\/span>
\nwidth<\/span>=<\/span>“600”<\/span>
\nheight<\/span>=<\/span>“450”<\/span>
\nstyle<\/span>=<\/span>“<\/span>border:0<\/span>;“<\/span>
\nallowfullscreen<\/span>=<\/span>“”<\/span>
\nloading<\/span>=<\/span>“lazy”<\/span>><\/span>
\n<\/iframe><\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n<\/div>\n<\/div>\n\n\n\n\n![\"https:\/\/community.getgrist.com\/uploads\/short-url\/4Jf3JhmtHIrgbKkpkWx6h3RjY1D.png?dl=1\"](\"https:\/\/community.getgrist.com\/uploads\/short-url\/4Jf3JhmtHIrgbKkpkWx6h3RjY1D.png?dl=1\")
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n4. Contoh iFrame PDF<\/strong><\/p>\n\n\n\n\n\n\n\n\n\n\n<iframe<\/span>
\nsrc<\/span>=<\/span>“file.pdf”<\/span>
\nwidth<\/span>=<\/span>“100%”<\/span>
\nheight<\/span>=<\/span>“500px”<\/span>><\/span>
\n<\/iframe><\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\nCara Membuat iFrame Responsive<\/h2>\n
Agar iFrame responsif (menyesuaikan layar), gunakan CSS berikut:<\/p>\n
\n\n\n\n\n\n\n\n\n\n<style><\/span>
\n.responsive-iframe<\/span> {
\nposition: relative<\/span>;
\nwidth: 100<\/span>%<\/span>;
\npadding-bottom: 56.25<\/span>%<\/span>;
\nheight: 0<\/span>;
\n}<\/p>\n.responsive-iframe<\/span> iframe<\/span> {
\nposition: absolute<\/span>;
\ntop: 0<\/span>;
\nleft: 0<\/span>;
\nwidth: 100<\/span>%<\/span>;
\nheight: 100<\/span>%<\/span>;
\n}
\n<\/style><\/span><\/p>\n<div<\/span> class<\/span>=<\/span>“responsive-iframe”<\/span>><\/span>
\n<iframe<\/span> src<\/span>=<\/span>“https:\/\/www.youtube.com\/embed\/VIDEO_ID”<\/span>
\nframeborder<\/span>=<\/span>“0”<\/span>
\nallowfullscreen<\/span>><\/span>
\n<\/iframe><\/span>
\n<\/div><\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\nTeknik ini menjaga rasio 16:9 agar tetap proporsional.<\/p>\n
Kelebihan Menggunakan iFrame<\/h2>\n\n- \n
Mudah mengintegrasikan konten eksternal<\/p>\n<\/li>\n
- \n
Tidak perlu menyalin seluruh kode sumber<\/p>\n<\/li>\n
- \n
Mendukung berbagai jenis media<\/p>\n<\/li>\n
- \n
Praktis untuk embed layanan pihak ketiga<\/p>\n<\/li>\n<\/ul>\n
Kekurangan iFrame<\/h2>\n\n- \n
Bisa memperlambat loading jika terlalu banyak<\/p>\n<\/li>\n
- \n
Risiko keamanan jika memuat situs tidak terpercaya<\/p>\n<\/li>\n
- \n
SEO kurang optimal karena konten dianggap terpisah<\/p>\n<\/li>\n
- \n
Tidak semua website mengizinkan ditampilkan dalam iFrame<\/p>\n<\/li>\n<\/ul>\n
Risiko Keamanan iFrame<\/h2>\n
iFrame bisa disalahgunakan untuk:<\/p>\n
\n- \n
Clickjacking<\/p>\n<\/li>\n
- \n
Phishing<\/p>\n<\/li>\n
- \n
Inject konten berbahaya<\/p>\n<\/li>\n<\/ul>\n
Untuk keamanan, gunakan atribut sandbox<\/code>:<\/p>\n\n\n\n\n\n\n\n\n\n\n<iframe<\/span> src<\/span>=<\/span>“https:\/\/example.com”<\/span> sandbox<\/span>><\/iframe><\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\nAtau batasi izin:<\/p>\n
\n\n\n\n\n\n\n\n\n\nsandbox=”allow-scripts allow-same-origin”<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\nPerbedaan iFrame dan Embed<\/h2>\n\n\n