Bagaimana cara saya menghapus perbatasan dari iframe yang tertanam di aplikasi web saya? Contoh iframe adalah:
<iframe src="myURL" width="300" height="300">Browser not compatible.</iframe>
Saya ingin transisi dari konten di halaman saya ke konten iframe menjadi mulus, dengan asumsi warna latar belakang konsisten. Browser target hanya untuk IE6 dan sayangnya solusi untuk orang lain tidak akan membantu.
Jawaban:
Tambahkan
frameBorder
atribut (perhatikan huruf kapital 'B' ).Jadi akan terlihat seperti:
sumber
frameBorder
menghasilkan kesalahan karena tidak sesuai dengan HTML5: Atribut frameborder pada elemen iframe sudah usang. Gunakan CSS sebagai gantinya. Di HTML5 saya akan mengatur properti CSS dariborder:0
. Apakah ada cara untuk membuatnya kompatibel tanpa menyebabkan kesalahan validasi?Setelah menjadi gila mencoba untuk menghapus perbatasan di IE7, saya menemukan bahwa atribut frameBorder adalah case-sensitive.
Anda harus mengatur atribut frameborder dengan modal B .
sumber
frameBorder
menggunakan huruf kapital B, atribut HTML sebenarnya tidak peka huruf besar-kecil. Dan dalam XHTML itu harus semua huruf kecilframeborder
.Sesuai dokumentasi iframe , frameBorder sudah tidak digunakan lagi dan menggunakan atribut CSS "border" lebih disukai:
sumber
Selain menambahkan atribut frameBorder Anda mungkin ingin mempertimbangkan pengaturan atribut gulir ke "tidak" untuk mencegah munculnya scrollbar.
sumber
Untuk masalah spesifik peramban juga tambahkan
frameborder="0" hspace="0" vspace="0" marginheight="0" marginwidth="0"
menurut Dreamweaver:sumber
Gunakan Atribut frameborder HTML iframe
http://www.w3schools.com/tags/att_iframe_frameborder.asp
Catatan: gunakan rangka B (tutup B) untuk IE, jika tidak, tidak akan berfungsi. Tapi, atribut frameborder iframe tidak didukung di HTML5. Jadi, gunakan CSS saja.
Anda juga dapat menghapus pengguliran menggunakan atribut gulir http://www.w3schools.com/tags/att_iframe_scrolling.asp
Anda juga dapat menggunakan atribut seamless yang baru di HTML5. Atribut tag iframe yang mulus hanya didukung di Opera, Chrome dan Safari. Saat hadir, itu menentukan bahwa iframe akan terlihat seperti itu adalah bagian dari dokumen yang berisi (tidak ada batas atau bilah gulir). Sampai sekarang, atribut tag yang mulus hanya didukung di Opera, Chrome dan Safari. Tetapi dalam waktu dekat ini akan menjadi solusi standar dan akan kompatibel dengan semua browser. http://www.w3schools.com/tags/att_iframe_seamless.asp
sumber
Anda dapat menggunakan
style="border:0;"
kode iframe Anda. Itu adalah cara yang disarankan untuk menghapus perbatasan di HTML5.Lihat alat pembuat iframe html5 saya untuk menyesuaikan iframe Anda tanpa mengedit kode.
sumber
Properti gaya dapat digunakan Untuk HTML5 jika Anda ingin menghapus isi bingkai Anda atau apa pun yang Anda bisa menggunakan properti gaya. seperti yang diberikan di bawah ini
Kode di sini
sumber
Tambahkan atribut frameBorder (Modal 'B').
sumber
Anda juga dapat melakukannya dengan JavaScript dengan cara ini. Ini akan menemukan elemen iframe dan menghapus batasnya di IE dan browser lain (meskipun Anda bisa mengatur gaya "border: none;" di browser non-IE daripada menggunakan JavaScript). DAN itu akan berfungsi bahkan jika digunakan SETELAH iframe dihasilkan dan ditempatkan di dalam dokumen (mis. Iframe yang ditambahkan dalam HTML biasa dan bukan JavaScript)!
Ini tampaknya berfungsi karena IE membuat perbatasan, bukan pada elemen iframe seperti yang Anda harapkan, tetapi pada ISI iframe - setelah iframe dibuat di BOM. ($ @ & * # @ !!! IE !!!)
Catatan: Bagian IE hanya akan berfungsi (tentu saja) jika jendela induk dan iframe berasal dari SAMA asal (domain, port, protokol, dll.) Yang sama. Kalau tidak, skrip akan mendapatkan kesalahan "akses ditolak" di konsol kesalahan IE. Jika itu terjadi, satu-satunya pilihan Anda adalah mengaturnya sebelum dihasilkan, seperti yang telah dicatat orang lain, atau menggunakan atribut frameBorder = "0" yang tidak standar. (atau biarkan IE terlihat jelek - opsi favorit saya saat ini;))
Butuh waktu berjam-jam untuk sampai ke titik keputusasaan untuk mencari tahu ...
Nikmati. :)
sumber
Saya mencoba semua hal di atas dan jika itu tidak berhasil, cobalah CSS di bawah ini untuk menyelesaikan masalah bagi saya. Yang hanya memberitahu browser untuk tidak menambahkan padding atau margin.
sumber
Jika doctype dari halaman tempat Anda meletakkan iframe adalah HTML5 maka Anda dapat menggunakan
seamless
atribut seperti ini:Mozilla docs pada atribut yang mulus
sumber
Di stylesheet Anda, tambahkan
Ini juga merupakan opsi yang layak.
sumber
Jika Anda menggunakan iFrame agar sesuai dengan lebar dan tinggi seluruh layar, yang saya asumsikan Anda tidak didasarkan pada ukuran 300x300, Anda juga harus mengatur margin tubuh ke "0" seperti ini:
sumber
Kode ini harus bekerja di HTML 4 dan 5.
sumber
Tambahkan atribut frameBorder, atau gunakan gaya dengan lebar perbatasan 0px ;, atau atur gaya perbatasan sama dengan tidak ada.
gunakan salah satu dari bawah 3:
sumber
juga atur border = "0px"
sumber
Mencoba
Ini akan menghapus batas bingkai Anda.
sumber
Gunakan ini
Contoh:
sumber
Untuk menghapus perbatasan, Anda tidak dapat menggunakan properti perbatasan CSS.
sumber
Sederhana saja tambahkan atribut di iframe tag frameborder = 0
<iframe src="" width="200" height="200" frameborder="0"></iframe>
sumber
1.Via Inline Style mengatur batas: 0
2. Via Tag Atribut frameBorder Set 0
3. Jika Kami memiliki beberapa I Frame, Kami dapat memberikan kelas dan menempatkan css di internal atau eksternal.
HTML:
CSS:
sumber
Saya punya masalah dengan batas putih bawah dan saya tidak bisa memperbaikinya dengan aturan perbatasan, margin & bantalan ... Jadi tambahkan
display:block;
karena iframe adalah elemen inline.Ini mengambil spasi putih di HTML Anda ke akun.
sumber
Bekerja dengan Firefox;)
sumber
sumber