Hapus batas dari IFrame

707

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.

JoelB
sumber
Anda dapat melakukannya dengan mudah dengan menggunakan generator iframe
Shan Eapen Koshy
2
Cukup buat kelas seperti ".nb {border: none;}" di dalam tag <style>. Kemudian tambahkan "class =" nb "" di dalam tag <iframe>.
Jim

Jawaban:

1126

Tambahkan frameBorderatribut (perhatikan huruf kapital 'B' ).

Jadi akan terlihat seperti:

<iframe src="myURL" width="300" height="300" frameBorder="0">Browser not compatible.</iframe>
David Basarab
sumber
3
Butuh waktu sebentar untuk mencari tahu di JavaScript Anda hanya perlu element.frameBorder = 0. no .style dan gunakan 0, bukan '0'
anderspitman
15
Ketika memvalidasi dokumen menggunakan Layanan Validasi Markup 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 dari border:0. Apakah ada cara untuk membuatnya kompatibel tanpa menyebabkan kesalahan validasi?
ᴍᴀᴛᴛ ʙᴀᴋᴇʀ
1
@ MatthewT.Baker Tentu, lihat jawaban saya di salah satu dari banyak pertanyaan lain tentang atribut ini: stackoverflow.com/a/20719286/1016716 Ups, saya melihat saya lupa modal B di sana; Saya akan mengedit.
Tn. Lister
15
@MartinAndersson caniuse.com/#feat=iframe-seamless menyatakan bahwa hal itu tidak didukung sama sekali.
Tim Büthe
2
Jawabannya di sini benar, namun komentar yang menunjukkan penggunaan atribut seamless tidak lagi benar. Atribut mulus telah dihapus dari spesifikasi: w3.org/TR/2014/REC-html5-20141028/…
Ron E
145

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 .

<iframe frameBorder="0"></iframe>
Adam
sumber
13
Ini benar-benar konyol! Tangkapan yang bagus. BEGITU menyelamatkan saya dari banyak masalah lagi :)
Alex
itu akan menjadi penyelamat jika berada jawaban yang benar, karena menyebutkan ibukota B .
KARASZI István
1
CATATAN: perubahan atribut frameborder di "debugger" F12 tidak akan ditampilkan oleh IE6. Sebagai gantinya, tambahkan atribut dalam kode html.
Perhatikan bahwa sementara properti JavaScript frameBordermenggunakan huruf kapital B, atribut HTML sebenarnya tidak peka huruf besar-kecil. Dan dalam XHTML itu harus semua huruf kecil frameborder.
Tuan Lister
83

Sesuai dokumentasi iframe , frameBorder sudah tidak digunakan lagi dan menggunakan atribut CSS "border" lebih disukai:

<iframe src="test.html" style="width: 100%; height: 400px; border: 0"></iframe>
  • Catatan Properti perbatasan CSS tidak mencapai hasil yang diinginkan di IE6, 7 atau 8.
Roberto Chiaretti
sumber
54

Selain menambahkan atribut frameBorder Anda mungkin ingin mempertimbangkan pengaturan atribut gulir ke "tidak" untuk mencegah munculnya scrollbar.

<iframe src="myURL" width="300" height="300" frameBorder="0" scrolling="no">Browser not compatible. </iframe > 
xenox
sumber
1
Apa yang setara di HTML5?
Daniel Springer
3
style = "overflow: hidden"
21

Untuk masalah spesifik peramban juga tambahkan frameborder="0" hspace="0" vspace="0" marginheight="0" marginwidth="0"menurut Dreamweaver:

<iframe src="test.html" name="banner" width="300" marginwidth="0" height="300" marginheight="0" align="top" scrolling="No" frameborder="0" hspace="0" vspace="0">Browser not compatible. </iframe>
Marnix Bras
sumber
9

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.

<iframe src="http://example.org" width="200" height="200" style="border:0">

Anda juga dapat menghapus pengguliran menggunakan atribut gulir http://www.w3schools.com/tags/att_iframe_scrolling.asp

<iframe src="http://example.org" width="200" height="200" scrolling="no" style="border:0">

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

Shubham Badal
sumber
9

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.

Shan Eapen Koshy
sumber
9

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

<iframe src="demo.htm" style="border:none;"></iframe>
Arpan Saini
sumber
7

Tambahkan atribut frameBorder (Modal 'B').

<iframe src="myURL" width="300" height="300" frameBorder="0">Browser not compatible. </iframe>
Harden Rahul
sumber
6

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. :)

// =========================================================================
// Remove borders on iFrames

if (window.document.getElementsByTagName("iframe"))
   {
      var iFrameElements = window.document.getElementsByTagName("iframe");
      for (var i = 0; i < iFrameElements.length; i++)
         {
            iFrameElements[i].frameBorder="0";   //  For other browsers.
            iFrameElements[i].setAttribute("frameBorder", "0");   //  For other browsers (just a backup for the above).
            iFrameElements[i].contentWindow.document.body.style.border="none";   //  For IE.
         }
   }
J118
sumber
6

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.

* {
  padding:0px;
  margin:0px;
 }
th0ward
sumber
5

Jika doctype dari halaman tempat Anda meletakkan iframe adalah HTML5 maka Anda dapat menggunakan seamlessatribut seperti ini:

<iframe src="..." seamless="seamless"></iframe>

Mozilla docs pada atribut yang mulus

David Tuite
sumber
4
jahitannya seperti ide bagus, tapi sayangnya tidak didukung dengan baik. caniuse.com/#search=seamless
code_monk
4
Itu tidak didukung sama sekali.
skobaljic
5

Di stylesheet Anda, tambahkan

{
  padding:0px;
  margin:0px;
  border: 0px

}

Ini juga merupakan opsi yang layak.

Tropilac
sumber
frameBorder tidak bekerja untuk saya, tetapi ini berhasil. Terima kasih.
Dois
4

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:

<body style="margin:0px;">
Michael Herr
sumber
4
<iframe src="mywebsite" frameborder="0" style="border: 0px solid white;">HTML iFrame is not compatible with your browser</iframe>

Kode ini harus bekerja di HTML 4 dan 5.

IamGuest
sumber
4

Tambahkan atribut frameBorder, atau gunakan gaya dengan lebar perbatasan 0px ;, atau atur gaya perbatasan sama dengan tidak ada.

gunakan salah satu dari bawah 3:

<iframe src="myURL" width="300" height="300" style="border-width:0px;">Browser not compatible.</iframe>

<iframe src="myURL" width="300" height="300" frameborder="0">Browser not compatible.</iframe>

<iframe src="myURL" width="300" height="300" style="border:none;">Browser not compatible.</iframe>

Divya Chugh
sumber
3

juga atur border = "0px"

 <iframe src="yoururl" width="100%" height="100%" frameBorder="0"></iframe>
Ajesh Kolakkadan
sumber
3

Mencoba

<iframe src="url" style="border:none;"></iframe>

Ini akan menghapus batas bingkai Anda.

Amaan Iqbal
sumber
3

Gunakan ini

style="border:none;

Contoh:

<iframe src="your.html" style="border:none;"></iframe>
pengguna6375752
sumber
2

Untuk menghapus perbatasan, Anda tidak dapat menggunakan properti perbatasan CSS.

<iframe src="myURL" width="300" height="300" style="border: none">Browser not compatible.</iframe>
pengguna8349297
sumber
1

Sederhana saja tambahkan atribut di iframe tag frameborder = 0 <iframe src="" width="200" height="200" frameborder="0"></iframe>

Chetan Chauhan
sumber
Sebelum menjawab pertanyaan, selalu baca jawaban yang ada. Jawaban ini sudah disediakan. Alih-alih mengulangi jawabannya, pilih jawaban yang ada. Beberapa pedoman untuk menulis jawaban yang baik dapat ditemukan di sini .
dferenc
0

1.Via Inline Style mengatur batas: 0

 <iframe src="display_file.html" style="height: 400px; width:
   100%;border: 0;">HTML iFrame is not compatible with your browser
   </iframe>

2. Via Tag Atribut frameBorder Set 0

<iframe src="display_file.html" width="300" height="300" frameborder="0">Browser not compatible.</iframe>

3. Jika Kami memiliki beberapa I Frame, Kami dapat memberikan kelas dan menempatkan css di internal atau eksternal.

HTML:

<iframe src="display_file.html" class="no_border_iframe">
    HTML iFrame is not compatible with your browser 
</iframe>

CSS:

<style>
.no_border_iframe{
border: 0; /* or border:none; */
}
</style>
Samir Lakhani
sumber
0

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.

mEnE
sumber
-1
iframe src="XXXXXXXXXXXXXXX"
marginwidth="0" marginheight="0" width="xxx" height="xxx"

Bekerja dengan Firefox;)

ahli bencana
sumber
pertanyaan yang berbeda mungkin?
-1
<iframe src="URL" frameborder="0" width="100%" height="200">
<p>Your browser does not support iframes.</p>
</iframe>

<iframe frameborder="1|0">

(OR)

<iframe src="URL" width="100%" height="300" style="border: none">Your browser 
does not support iframes.</iframe>

The <iframe> frameborder attribute is not supported in HTML5. Use CSS 
instead.
Md Shahriar
sumber