Bingkai Sebaris Memungkinkan Anda Menyertakan Konten dari Sumber Eksternal di Halaman Anda
Kerangka sebaris, biasanya hanya disebut sebagai "iframes", adalah satu-satunya jenis bingkai yang diizinkan dalam HTML5. Frame ini pada dasarnya adalah bagian dari halaman Anda yang Anda "memotong". Di ruang yang telah Anda keluarkan dari halaman, Anda dapat memberi makan di halaman web eksternal. Intinya, iframe adalah jendela browser lain yang disetel tepat di dalam halaman web Anda. Anda melihat iframes yang umum digunakan di situs web yang perlu menyertakan konten eksternal seperti peta Google atau video dari YouTube.
Kedua situs web populer tersebut menggunakan iframes dalam kode embednya.
Cara Menggunakan Elemen IFRAME
Elemen ini menggunakan elemen global HTML5 serta beberapa elemen lainnya. Empat juga atribut dalam HTML 4.01:
- - URL untuk sumber frame
- - Ketinggian jendela
- - lebar jendela
- - nama jendela
Dan tiga baru di HTML5:
- srcdoc —situs HTML untuk sumber bingkai. Atribut ini didahulukan dari URL apa pun dalam atribut src
- sandbox —sebuah daftar fitur yang harus diizinkan atau tidak diizinkan di jendela bingkai
- mulus —beritahu agen pengguna bahwa iframe harus dirender seperti itu adalah bagian tak terlihat dari dokumen induk
Untuk membuat iframe sederhana, Anda menetapkan URL sumber serta lebar dan tingginya:
Perhatikan bahwa Anda dapat memilih untuk tidak menggunakan nilai piksel untuk pengaturan iframe Anda, tetapi sebaliknya dapat memutuskan untuk menggunakan persentase.
Jika Anda membuat situs web responsif yang ukurannya harus berubah dengan ukuran layar yang berbeda, persentase ini akan menjadi penting.
Ada juga beberapa atribut yang valid dalam HTML 4.01 tetapi usang dalam HTML5. Karena sebagian besar situs web saat ini menggunakan HTML5 +, atribut ini adalah yang tidak ingin Anda gunakan (tetapi yang mungkin Anda lihat di beberapa dokumen lawas).
- —bukan, gunakan elemen A untuk menautkan ke deskripsi
- —bukan, gunakan properti float CSS
- allowtransparency —bahkan, gunakan properti latar belakang CSS untuk membuat ifram transparan
- —bahkan gunakan properti border CSS
- marginheight —bukan, gunakan properti margin CSS
- marginwidth —bahkan, gunakan properti margin CSS
- —bahkan, gunakan properti CSS overflow
Dukungan Browser IFRAME
Elemen IFRAME didukung oleh semua browser modern:
- Android
- Chrome
- Firefox
- Internet Explorer 2+
- iOS / Safari Mobile
- Netscape 7+
- Opera 3+
- Safari
Jika tidak ada nomor versi yang ditampilkan dalam daftar di atas, itu karena semua versi browser mendukungnya.
Satu hal yang harus diperhatikan adalah bahwa sementara semua browser mendukung elemen IFRAME, masih ada dukungan terbatas untuk beberapa fitur HTML5.
- Menggunakan overflow untuk mematikan gulir tidak dapat diandalkan. Jika Anda tidak ingin scrollbar di iframe Anda, Anda harus terus menggunakan atribut bergulir.
- Fitur srcdoc, sandbox, dan seamless tidak didukung oleh browser apa pun saat ini.
Menautkan dengan Iframes
Saat Anda memberi iframe Anda nama atau id, Anda dapat mengarahkan tautan Anda ke bingkai tersebut dengan atribut pada elemen A. Kemudian, ketika seorang pengguna mengklik pada tautan, itu akan terbuka di dalam iframe yang direferensikan dan bukan pada jendela saat ini.
Cobalah sendiri. Ketik yang berikut ini ke halaman web:
Jika dokumen yang dibuka di IFRAME tidak memiliki target yang ditetapkan, maka semua tautan tersebut akan terbuka dalam iframe yang sama dengan dokumen induk .
Anda dapat menggunakan fitur ini untuk membuat tautan dalam satu IFRAME mengubah isi IFRAME lain pada halaman yang sama.
IFrames dan Keamanan
Elemen IFRAME, dengan sendirinya, bukanlah risiko keamanan bagi Anda atau pembaca Anda.
Sayangnya iframes mendapatkan reputasi buruk karena dapat digunakan oleh situs web jahat untuk menyertakan konten yang dapat menginfeksi komputer pengunjung tanpa mereka melihatnya di halaman. Ini dilakukan dengan menghubungkan tautan ke IFRAME yang tak terlihat dan skrip tersebut memicu kode berbahaya. Pengguna mengklik tautan tersebut dan berpikir bahwa tautan tersebut rusak karena tidak ada yang terjadi, tetapi skrip telah dinonaktifkan dan mereka tidak dapat melihatnya.
Ada juga virus komputer yang akan menyuntikkan IFRAME yang tak terlihat ke dalam halaman web Anda, secara efektif mengubah situs web Anda menjadi botnet. Mereka dapat melakukan ini melalui injeksi SQL dan serangan lainnya.
Hal yang perlu diingat ketika memasukkan IFRAME di halaman web Anda adalah bahwa pengguna Anda hanya seaman isi dari semua situs yang Anda tautkan. Jika Anda memiliki alasan untuk merasa bahwa sebuah situs tidak dapat dipercaya, jangan tautkan ke situs itu dengan cara apa pun dan paling tidak tidak menyertakan isinya dalam IFRAME. Menghubungkan ke halaman Anda sendiri dalam iframes, bagaimanapun, tidak menimbulkan risiko keamanan bagi Anda atau pengguna Anda.
Artikel asli oleh Jennifer Krynin. Diedit pada 11/7/16 oleh Jeremy Girard