Pengertian Iframe

Posted by Kim Wanda Young

July 24, 2019

iframe

Iframe (kependekan dari "inline frame") adalah sintaks HTML yang memungkinkan Anda untuk menyematkan halaman web di halaman web lain. (Ini seperti Inception untuk situs web - halaman dalam halaman.) Anda dapat menyesuaikan tinggi, lebar, batas, dan apakah bingkai memiliki bilah gulir. Berikut ini cuplikan HTML yang akan Anda gunakan untuk menyematkan satu halaman ke halaman lain:

Anda mungkin telah melihat video YouTube yang tak terhitung jumlahnya tertanam di situs selain YouTube. IFrame dapat memasukkan semua jenis media. Jadi Anda mungkin bertanya-tanya bagaimana hal itu dilakukan. Kemungkinannya adalah perancang web meletakkan elemen iFrame di dalam halaman itu.

Di bawah ini saya telah menggunakan iframe untuk menyematkan halaman lain di situs blog saya:

Perancang Web dapat mengubah konten IFrame tanpa mengharuskan pengguna memuat ulang halaman di sekitarnya. Kapasitas ini diaktifkan melalui JavaScript atau atribut target jangkar HTML.

Desainer web menggunakan IFrames untuk menyematkan aplikasi interaktif di halaman Web, termasuk yang menggunakan Ajax (Asynchronous JavaScript dan XML), seperti Google Maps atau aplikasi ecommerce.

Pada artikel ini, kita akan melihat lebih dekat pada iFrame dan cara menggunakannya, dan membicarakan hal-hal lain yang layak dipertimbangkan sebelum Anda memasukkan iFrame ke dalam dokumen HTML Anda.

Apa itu iFrame

IFrame adalah bingkai di dalam bingkai. Ini adalah komponen elemen HTML yang memungkinkan Anda menyematkan dokumen, video, dan media interaktif dalam satu halaman. Dengan melakukan ini, Anda dapat menampilkan halaman web sekunder di halaman utama Anda.

Elemen iFrame memungkinkan Anda untuk memasukkan sepotong konten dari sumber lain. Itu dapat mengintegrasikan konten di mana saja di dalam halaman Anda, tanpa harus memasukkannya ke dalam struktur tata letak web Anda, seperti elemen tradisional.

Anda seharusnya tidak menggunakan iFrame secara berlebihan. Ini dapat memperlambat halaman Anda dan menimbulkan risiko keamanan, terutama jika Anda menggunakan konten dari situs web yang mencurigakan.

Pikirkan tentang iFrame sebagai bagian dari konten Anda, tetapi bukan bagian dari situs Anda. Misalnya, jika Anda ingin menambahkan video YouTube untuk merangsang pembaca Anda, maka Anda dapat memasukkan elemen iFrame ke posting itu.

Bagaimana iframe digunakan?

Seperti disebutkan di atas, iframe digunakan untuk menyematkan satu halaman web ke yang lain, dan ada banyak tujuan yang mana iframe adalah solusi terbaik.

Mereka berguna ketika Anda memiliki halaman konten yang memerlukan komponen spesifik dari situs lain, tetapi Anda tidak dapat atau tidak ingin menduplikasi konten itu atau menyematkan kode yang disediakan situs lain.

Sekarang Anda tahu bahwa iFrame adalah elemen tambahan untuk berbagi konten dari situs lain. Anda dapat menambahkannya untuk memberikan konteks tentang topik tertentu kepada pembaca.

Anda bisa memasukkan elemen iFrame dengan menggunakan tag <,iframe,> (hilangkan tanda koma setelah dan sebelum tanda <>) dalam dokumen HTML. Salin kode di bawah ini dan tempel ke notepad, dan simpan file dalam format .html:

<,iframe width="560" height="315" src="https://www.youtube.com/embed/0ODG7e3HoWQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>

Kode di atas akan menampilkan video tutorial YouTube oleh Hostinger. Mari kita periksa setiap tag secara terpisah:

Tag <,iframe> ...

digunakan untuk memuat video di dalam iFrame.

Sumber iFrame (src) adalah sumber konten dari server eksternal atau internal. Jangan lupa untuk memasukkan kode yang tertanam di URL.

Lebar dan tinggi adalah rasio aspek iFrame. Anda dapat memasukkan ukuran tetap seperti 560 × 325 piksel (px) seperti pada contoh. Atau, Anda dapat menggunakan metode berbasis persentase (10% -100%) untuk menyesuaikan iFrame secara otomatis.

YouTube menggunakan iframe dalam kode sematannya untuk saat Anda ingin menempatkan video di halaman web Anda. SlideShare menggunakan iframe dengan cara yang sama untuk menanamkan presentasi.

Beberapa menggunakan iframe untuk menampilkan artikel PDF di dalam halaman alih-alih mengharuskan pengguna untuk mengklik tautan dan mengunduh PDF secara terpisah.

Ancaman Keamanan dari iframe

Secara alami, elemen iFrame tidak menimbulkan risiko keamanan apa pun untuk halaman web Anda atau pembaca Anda. Sebagian, itu dikembangkan untuk membantu pembuat konten menambahkan materi yang menarik secara visual kepada pembaca. Namun demikian, Anda perlu memperhatikan ketika menambahkan iFrame dari situs web yang tidak terpercaya.

Ada lonjakan injeksi kode iFrame di beberapa situs web yang sah, seperti berita ABC, pada tahun 2008. Jenis serangan ini mengarahkan pengunjung ke situs jahat, yang kemudian akan menginstal virus ke PC pengunjung atau mencoba mencuri informasi sensitif.

Itulah mengapa tidak disarankan untuk memasukkan iFrame sebagai bagian integral dari situs web Anda.

Jika Anda berpikir bahwa sebuah situs web tidak aman, jangan repot-repot menautkannya dan jangan menaruh kontennya di elemen iFrame Anda.

Kesimpulan

Secara keseluruhan, iFrame adalah elemen yang kuat jika Anda ingin lebih banyak keterlibatan bagi pengunjung Anda. Pikirkan iFrame sebagai bagian dari konten yang Anda buat, bukan sebagai bagian integral dari situs web Anda.

Anda seharusnya tidak menggunakan iFrame secara berlebihan; lebih baik jika Anda dapat mengembangkan situs Anda tanpa iFrame.

Jika Anda masih perlu menggunakannya untuk tujuan pengembangan, ingat hanya untuk menggunakan konten dari situs yang dapat dipercaya. Kami harap artikel ini membantu Anda dalam mengimplementasikan dan memahami iFrame.