Hapus batas dari IFrame

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.

Tambahkan frameBorderatribut (perhatikan huruf kapital 'B' ).

Jadi akan terlihat seperti:

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

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>

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.

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 > 

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>

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

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.

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>

Tambahkan atribut frameBorder (Modal 'B').

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

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.
         }
   }

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;
 }

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

Di stylesheet Anda, tambahkan

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

}

Ini juga merupakan opsi yang layak.

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;">

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

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>

juga atur border = "0px"

 <iframe src="yoururl" width="100%" height="100%" frameBorder="0"></iframe>

Mencoba

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

Ini akan menghapus batas bingkai Anda.

Gunakan ini

style="border:none;

Contoh:

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

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

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

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

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>

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.

iframe src="XXXXXXXXXXXXXXX"
marginwidth="0" marginheight="0" width="xxx" height="xxx"

Bekerja dengan Firefox;)

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