it-swarm-id.com

Hapus batas dari IFrame

Bagaimana cara menghapus perbatasan dari iframe yang disematkan 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.

645
JoelB

Tambahkan atribut frameBorder (perhatikan modal ‘B’ ).

Jadi akan terlihat seperti:

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

Setelah menjadi gila mencoba untuk menghapus perbatasan di IE7, saya menemukan bahwa atribut frameBorder adalah case sensitif.

Anda harus mengatur atribut frameBorder dengan huruf kapitalB.

<iframe frameBorder="0" ></iframe>
142
Adam

Sesuai iframe dokumentasi, 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 batas CSS tidak tidak mencapai hasil yang diinginkan di IE6, 7 atau 8.
64

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 > 
53
xenox

Untuk masalah spesifik peramban juga tambahkan frameborder="0" hspace="0" vspace="0" marginheight="0" marginwidth="0" sesuai dengan 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>
21
Marnix Bras

Gunakan Atribut frameborder HTML iframe

http://www.w3schools.com/tags/att_iframe_frameborder.asp

Catatan: gunakan frameBorder (cap 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 pengguliran 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

9
Shubham Badal

Anda dapat menggunakan style="border:0;" dalam kode iframe Anda. Itu adalah cara yang disarankan untuk menghapus perbatasan di HTML5.

Lihat generator iframe html5 saya alat untuk menyesuaikan iframe Anda tanpa mengedit kode.

8
Shan Eapen Koshy

Properti Style dapat digunakan Untuk HTML5 jika Anda ingin menghapus batas bingkai Anda atau apa pun, Anda dapat menggunakan properti style. seperti yang diberikan di bawah ini

Kode di sini

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

Tambahkan atribut frameBorder (Modal ‘B’).

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

Jika tipe halaman Anda menempatkan iframe di HTML5 maka Anda dapat menggunakan atribut seamless seperti:

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

Mozilla docs pada atribut seamless

6
David Tuite

Anda juga dapat melakukannya dengan JavaScript dengan cara ini. Ini akan menemukan elemen iframe dan menghapus batasnya di IE dan peramban lain (meskipun Anda bisa mengatur gaya "border: none;" di peramban 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 menciptakan 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 SAMA (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 buruk - 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.
         }
   }
6
FirstFraktal

Di stylesheet Anda, tambahkan

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

}

Ini juga merupakan opsi yang layak.

5
Tropilac

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;
 }
5
th0ward
<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.

4
IamGuest

Jika Anda menggunakan iFrame agar sesuai dengan lebar dan tinggi seluruh layar, yang saya asumsikan Anda tidak berdasarkan pada ukuran 300x300, Anda juga harus mengatur margin tubuh ke "0" seperti ini:

<body style="margin:0px;">
4
Michael Herr

juga atur border = "0px"

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

Mencoba

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

Ini akan menghapus batas bingkai Anda.

2
Amaan Iqbal

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>
2
Divya Chugh

Gunakan ini

style="border:none;

Contoh:

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

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

1
Chetan Chauhan

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

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