Apakah iframe dianggap 'praktik buruk'? [Tutup]


286

Di suatu tempat di sepanjang garis saya mengambil gagasan bahwa menggunakan iframe adalah 'praktik buruk'.

Apakah ini benar? Apa pro / kontra dari penggunaannya?

Jawaban:


217

Seperti halnya semua teknologi, ia mengalami pasang surut. Jika Anda menggunakan iframe untuk menjelajahi situs yang dikembangkan dengan benar, maka tentu saja itu adalah praktik yang buruk. Namun terkadang iframe dapat diterima.

Salah satu masalah utama dengan iframe berkaitan dengan bookmark dan navigasi. Jika Anda menggunakannya untuk hanya menanamkan halaman di dalam konten Anda, saya pikir itu baik-baik saja. Itulah gunanya iframe.

Namun saya telah melihat iframe dilecehkan juga. Seharusnya tidak pernah digunakan sebagai bagian integral dari situs Anda, tetapi sebagai bagian dari konten dalam situs.

Biasanya, jika Anda bisa melakukannya tanpa iframe, itu pilihan yang lebih baik. Saya yakin orang lain di sini mungkin memiliki lebih banyak informasi atau lebih banyak contoh spesifik, semuanya bermuara pada masalah yang Anda coba selesaikan.

Dengan itu, jika Anda terbatas pada HTML dan tidak memiliki akses ke backend seperti PHP atau ASP.NET dll, kadang-kadang iframe adalah satu-satunya pilihan Anda.


23
"Jika Anda terbatas pada HTML dan tidak memiliki akses ke backend seperti PHP atau ASP.NET dll, terkadang iframe adalah satu-satunya pilihan Anda" ... itu tidak benar. Anda dapat menyematkan konten eksternal di halaman Anda dengan mendapatkan data melalui jquery ajax dan kemudian mengisi div dengan data itu.
developer747

53
@ developer747 - Itu tidak akan berfungsi jika konten eksternal ada di situs lain karena kebijakan asal yang sama . Dalam beberapa kasus yang tidak jelas, situs jarak jauh mungkin mendukung JSONP ; tapi mungkin juga tidak.
Peter V. Mørch

2
Saya merasa iframe jauh lebih tidak berguna daripada frameset sebelumnya karena iframe tidak dapat diubah ukurannya oleh pengguna - tetapi saya tidak akan menggunakan frameset untuk apa pun selain manual karena tidak ada lagi di html5. Contoh: Manual pembuat game
Domino

15
Harus disebutkan bahwa iframe saat ini adalah satu-satunya cara untuk mendefinisikan ruang lingkup CSS bersarang. Mereka mengisolasi markup dalam, tata letak, gaya, dan Javascript * dari dokumen luar, yang berguna dalam banyak kasus dan aplikasi. * Javascript tidak terisolasi jika dokumen dalam berbagi asal dengan yang luar; di sisi lain, dokumen dari asal yang berbeda masih dapat berkomunikasi menggunakan window.postMessage(), misalnya untuk menerapkan pengubahan ukuran iframe kolaboratif.
Tobia

1
IFrame Is Evil! dapat membantu juga
DanielV

75

Itu bukan praktik yang buruk, mereka hanya alat lain dan mereka menambah fleksibilitas.

Untuk digunakan sebagai elemen halaman standar ... mereka bagus, karena mereka adalah cara sederhana dan dapat diandalkan untuk memisahkan konten ke beberapa halaman. Khusus untuk konten yang dibuat pengguna, mungkin berguna untuk "mem-sandbox" halaman internal menjadi iframemarkup yang buruk tidak memengaruhi halaman utama. Kelemahannya adalah jika Anda memperkenalkan beberapa lapisan pengguliran (satu untuk browser, satu untuk iframe) pengguna Anda akan merasa frustrasi. Seperti yang dikatakan oleh adzm, Anda tidak ingin menggunakan iframenavigasi utama, tetapi pikirkan tentang mereka sebagai teks / markup yang setara dengan cara video atau file media lain akan disematkan.

Untuk acara latar skrip, pilihan umumnya antara tersembunyi iframedan XmlHttpRequestmemuat konten untuk halaman saat ini. Perbedaannya adalah bahwa iframemenghasilkan beban halaman, sehingga Anda dapat bergerak maju dan mundur di cache browser dengan sebagian besar browser. Perhatikan bahwa Google, yang menggunakan XmlHttpRequestsemua tempat, juga menggunakan iframehuruf s dalam kasus tertentu untuk memungkinkan pengguna bergerak maju dan mundur dalam riwayat peramban.


11
Saya pikir penting untuk menyebutkan bahwa iframes dapat digunakan untuk menyematkan halaman dari domain ke halaman dari domain lain. Jika halaman yang disematkan ingin mengikuti pengguna dengan cookie dan menyimpan informasi itu dari domain host, maka satu-satunya pilihan Anda adalah menggunakan iframe karena JS berada di bawah kendali domain host.
Nicholas Leonard

@NicholasLeonard Contoh yang baik adalah Anda dapat menggunakannya untuk memaksa cache berbasis penyimpanan lokal dengan membuat halaman indeks sebagai skrip yang mendeteksi jika subhalaman berada dalam penyimpanan lokal. Kemudian, document.write dari penyimpanan lokal jika ada di sana, dan jika tidak tambahkan iframe ke subhalaman itu. Di subhalaman itu, miliki skrip untuk menyimpan subhalaman HTML outerhtml elemen ke penyimpanan lokal. Alasan yang BENAR-BENAR bagus untuk menggunakan metode ini adalah karena ia memungkinkan Anda untuk menambahkan di layar pemuatan.

Saya tidak setuju, tetapi saya tidak bisa menurunkannya, karena ini adalah POV yang penting.
victorf

28

Ini 'praktik buruk' untuk menggunakannya tanpa memahami kelemahan mereka. Posting Adzm merangkumnya dengan sangat baik.

Di sisi lain, gmail banyak menggunakan iFrames di latar belakang untuk beberapa fitur yang lebih keren (seperti unggahan file otomatis). Jika Anda mengetahui keterbatasan iFrames, saya tidak yakin Anda harus merasa terganggu saat menggunakannya.


18

Setelah bekerja dengan mereka dalam banyak keadaan, saya benar-benar berpikir bahwa iframe adalah pemrograman web yang setara dengan pernyataan goto. Artinya, sesuatu yang harus dihindari secara umum. Di dalam suatu situs mereka bisa berguna. Namun, lintas situs, mereka hampir selalu merupakan ide yang buruk untuk apa pun kecuali konten yang paling sederhana.

Pertimbangkan kemungkinan ... jika digunakan untuk konten parameter, mereka telah membuat antarmuka. Dan di situs profesional, antarmuka itu memerlukan SLA dan manajemen versi - yang hampir selalu diabaikan untuk segera online.

Jika digunakan untuk konten aktif - membingkai skrip yang menampung host - maka ada pembatasan skrip domain lintas (berbeda). Beberapa dapat diretas, tetapi jarang secara konsisten. Dan jika konten berbingkai Anda harus interaktif, ia akan kesulitan melakukannya di luar bingkai.

Jika digunakan dengan konten berlisensi, maka situs yang berpartisipasi dibebani oleh kebutuhan untuk memindahkan informasi hak keluar dari pita antara host.

Jadi, meskipun, kadang-kadang berguna dalam suatu situs, mereka agak tidak cocok untuk mashup. Anda jauh lebih baik melihat portal dan portlet nyata. Lebih buruk lagi, mereka adalah kesayangan setiap amatir web - banyak manajer teknologi telah menganggap mereka sebagai solusi untuk banyak masalah. Bahkan, mereka menciptakan lebih banyak.


10

Berdasarkan pengalaman saya, sisi positif untuk iframe adalah ketika memanggil kode pihak ketiga, yang mungkin melibatkan memanggil javascript yang memanggil a memiliki Document.write();perintah. Seperti yang Anda ketahui, perintah-perintah ini tidak dapat dipanggil secara tidak sinkron karena cara ini diuraikan (DOM Parser dll). Contoh dari ini adalah http://sourceforge.net/projects/phpadsnew/ Saya telah menggunakan iframe untuk membantu mempercepat situs kami karena ada beberapa panggilan ke phpadsnews dan situs itu menunggu tanggapan sebelum melanjutkan untuk membuat yang berbeda bagian dari halaman. dengan iframe saya dapat mengizinkan situs untuk membuat bagian lain dari halaman dan masih memanggil Document.write()perintah phpads secara tidak sinkron. Mencegah dan mengunci.


8

Pasti ada kegunaan untuk iframes, orang. Bagaimana lagi Anda meletakkan widget jaringan cuaca di halaman Anda? Satu-satunya cara lain adalah dengan mengambil XML mereka dan menguraikannya, tetapi tentu saja Anda perlu kondisi untuk memunculkan grafik cuaca yang terkait ... tidak benar-benar layak, tetapi jauh lebih bersih jika Anda punya waktu.


6

Model frameset asli (Frameet dan Frame-elemen) sangat buruk dari sudut pandang kegunaan. IFrame vas penemuan kemudian yang tidak memiliki banyak masalah seperti model frameset asli, tetapi memang memiliki kelemahan.

Jika Anda mengizinkan pengguna menavigasi di dalam IFrame, maka tautan dan bookmark tidak akan berfungsi seperti yang diharapkan (karena Anda menandai URL halaman luar, tetapi bukan URL iframe).


1
harus tidak setuju ... komentar luas seperti ini tidak memenuhi syarat sama sekali.
Dawesi

5

Ketika halaman utama Anda memuat protokol HTTP dan bagian-bagian halaman Anda perlu bekerja dalam protokol HTTPS, iFrame dapat mengalahkan jsonp hands down.

Terutama, jika dataType Anda tidak asli json dan perlu diterjemahkan pada server menjadi json dan diterjemahkan pada klien kembali ke misalnya html kompleks.

Jadi tidak - iFrame tidak jahat.


5

Mereka tidak buruk, tetapi sebenarnya membantu. Saya punya masalah besar beberapa waktu lalu di mana saya harus menanamkan feed twitter saya dan itu tidak akan membiarkan saya melakukannya di halaman yang sama, jadi saya meletakkannya di halaman yang berbeda, dan memasukkannya ke dalam iframe.

Mereka juga bagus karena semua browser (dan browser ponsel) mendukungnya. Mereka tidak dapat dianggap sebagai praktik yang buruk, selama Anda menggunakannya dengan benar.


4

Perlu dicatat bahwa iframe akan, terlepas dari kecepatan koneksi internet pengguna Anda atau konten iframe, menyebabkan sedikit (0,3s atau lebih), tetapi memperlambat kecepatan dalam mengunduh halaman Anda. Ini bukan sesuatu yang akan Anda lihat ketika mengujinya secara lokal. Sebenarnya, ini berlaku untuk setiap elemen yang ditambahkan ke halaman, tetapi iframe tampaknya lebih buruk.


1
Mengapa? Dan apakah ini cara mereka untuk membuat iframe dimuat setelah halaman utama selesai dimuat?
Nicholas Leonard

3
Saya tidak ingat mengapa mereka sangat lambat; Saya sedang meneliti ini setahun yang lalu. Mungkin karena browser pada dasarnya menciptakan konteks rendering yang sama sekali baru untuk setiap iframe. Sedangkan untuk membuatnya tidak memuat sampai memuat halaman selesai, Anda dapat menggunakan iframe kosong dan kemudian mengatur tag src iframe setelah memuat halaman selesai. Namun, perlu diketahui bahwa bahkan iframe kosong akan memperlambat rendering halaman Anda, meskipun bukan unduhan, sehingga hal-hal akan tetap tampak lebih lambat bagi pengguna Anda.
Brian

3
Sebaliknya, orang mungkin mempertimbangkan untuk mendiskusikan CDN (Content Delivery Networks) ketika merujuk kecepatan dan iFrames. Pertimbangkan bahwa iFrame dapat mengunduh sumber daya secara paralel dan karenanya memberikan peningkatan dalam kecepatan (tergantung pada browser). Inilah setidaknya satu referensi lain yang sesuai dengan posisi saya. developer.yahoo.com/performance/rules.html
Strixy

2
@Strixy: URL yang Anda tentukan menyatakan bahwa IFrames mahal, bahkan ketika kosong. Ini merekomendasikan meminimalkan penggunaan IFrames. Menggunakan CDN untuk mempercepat situs Anda adalah ortogonal untuk menggunakan IFrames. CDN dapat membantu mengurangi biaya penggunaan IFrame. Namun, CDN tanpa IFrame lebih baik dari CDN dan IFrame.
Brian

1
@Strixy: Jika Anda ingin mengunduh sumber daya secara paralel, ada cara yang lebih baik untuk melakukannya. Hotness lama adalah memuat semua hal itu melalui javascript. Hotness baru adalah menggunakan pekerja Layanan, yang secara efektif memungkinkan Anda untuk mengelola secara langsung bagaimana agen pengguna memuat, memuat, dan menyimpan sumber daya situs menggunakan logika sisi-klien. Hotness baru lainnya adalah push http / 2, yang memungkinkan Anda untuk mengirim sumber daya ke browser tanpa menunggu browser untuk memintanya. Namun, karena cache http / 2 diperiksa setelah cache browser lain, seringkali merupakan pilihan yang buruk untuk tujuan ini.
Brian

3

Saya telah melihat IFRAME diterapkan dengan sangat sukses sebagai cara mudah untuk membuat menu konteks dinamis, tetapi audiens target dari aplikasi web itu hanya pengguna Internet Explorer.

Saya akan mengatakan bahwa itu semua tergantung pada kebutuhan Anda. Jika Anda ingin memastikan bahwa halaman Anda berfungsi dengan baik di setiap browser, hindari IFRAME. Jika Anda menargetkan audiens yang sempit dan terkenal (mis. Di Intranet lokal) dan Anda melihat manfaat menggunakan IFRAME maka saya akan mengatakan tidak masalah untuk melakukannya.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.