Xóa đường viền khỏi IFrame

Làm cách nào để xóa đường viền khỏi iframe được nhúng trong ứng dụng web của tôi? Một ví dụ về iframe là:

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

Tôi muốn quá trình chuyển đổi từ nội dung trên trang của tôi sang nội dung của iframe sẽ liền mạch, giả sử màu nền là nhất quán. Trình duyệt mục tiêu chỉ là IE6 và không may là các giải pháp cho người khác sẽ không giúp ích.

Thêm frameBorderthuộc tính (lưu ý viết hoa 'B' ).

Vì vậy, nó sẽ trông như:

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

Sau khi phát điên khi cố gắng loại bỏ đường viền trong IE7, tôi thấy rằng thuộc tính frameBorder phân biệt chữ hoa chữ thường.

Bạn cần phải thiết lập các thuộc tính frameborder với số vốn B .

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

Theo tài liệu iframe , frameBorder không được dùng nữa và sử dụng thuộc tính CSS "viền" được ưu tiên:

<iframe src="test.html" style="width: 100%; height: 400px; border: 0"></iframe>

• Lưu ý thuộc tính viền CSS không đạt được kết quả mong muốn trong IE6, 7 hoặc 8.

Ngoài việc thêm thuộc tính frameBorder, bạn có thể muốn xem xét đặt thuộc tính cuộn thành "không" để ngăn thanh cuộn xuất hiện.

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

Đối với các sự cố cụ thể của trình duyệt cũng thêm frameborder="0" hspace="0" vspace="0" marginheight="0" marginwidth="0"theo 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>

Sử dụng thuộc tính khung nội tuyến iframe frameborder

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

Lưu ý: sử dụng thứ tự khung B (nắp B) cho IE, nếu không sẽ không hoạt động. Nhưng, thuộc tính khung hình iframe không được hỗ trợ trong HTML5. Vì vậy, sử dụng CSS thay thế.

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

bạn cũng có thể xóa cuộn bằng cách sử dụng thuộc tính cuộn http://www.w3schools.com/tags/att_iframe_scrolling.asp

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

Ngoài ra, bạn có thể sử dụng thuộc tính liền mạch vốn mới trong HTML5. Thuộc tính liền mạch của thẻ iframe chỉ được hỗ trợ trong Opera, Chrome và Safari. Khi có mặt, nó chỉ định rằng iframe sẽ trông giống như nó là một phần của tài liệu chứa (không có viền hoặc thanh cuộn). Đến bây giờ, thuộc tính liền mạch của thẻ chỉ được hỗ trợ trong Opera, Chrome và Safari. Nhưng trong tương lai gần, nó sẽ là giải pháp tiêu chuẩn và sẽ tương thích với tất cả các trình duyệt. http://www.w3schools.com/tags/att_iframe_siền.asp

Bạn có thể sử dụng style="border:0;"mã iframe của mình. Đó là cách được đề xuất để xóa đường viền trong HTML5.

Kiểm tra công cụ tạo iframe html5 của tôi để tùy chỉnh iframe của bạn mà không cần chỉnh sửa mã.

Thuộc tính kiểu có thể được sử dụng cho HTML5 nếu bạn muốn xóa bộ mã hóa khung của mình hoặc bất cứ thứ gì bạn có thể sử dụng thuộc tính kiểu. như được đưa ra dưới đây

Mã ở đây

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

Thêm thuộc tính frameBorder (Vốn 'B').

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

Bạn cũng có thể làm điều đó với JavaScript theo cách này. Nó sẽ tìm thấy bất kỳ thành phần iframe nào và loại bỏ các đường viền của chúng trong IE và các trình duyệt khác (mặc dù bạn chỉ có thể đặt kiểu "đường viền: không;" trong các trình duyệt không phải IE thay vì sử dụng JavaScript). VÀ nó sẽ hoạt động ngay cả khi được sử dụng SAU KHI iframe được tạo và tại chỗ trong tài liệu (ví dụ: iframe được thêm vào bằng HTML đơn giản và không phải JavaScript)!

Điều này dường như hoạt động vì IE tạo đường viền, không phải trên phần tử iframe như bạn mong đợi, mà trên NỘI DUNG của iframe - sau khi iframe được tạo trong BOM. ($ @ & * # @ !!! IE !!!)

Lưu ý: Phần IE sẽ chỉ hoạt động (tất nhiên) nếu cửa sổ cha và iframe là từ nguồn gốc SAME (cùng tên miền, cổng, giao thức, v.v.). Nếu không, tập lệnh sẽ nhận được lỗi "truy cập bị từ chối" trong bảng điều khiển lỗi IE. Nếu điều đó xảy ra, tùy chọn duy nhất của bạn là đặt nó trước khi nó được tạo, như những người khác đã lưu ý hoặc sử dụng thuộc tính frameBorder = "0" không chuẩn. (hoặc chỉ để IE tìm kiếm đầy đủ - tùy chọn yêu thích hiện tại của tôi;))

Mất tôi NHIỀU giờ làm việc đến mức tuyệt vọng để tìm ra điều này ...

Thưởng thức. :)

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

Tôi đã thử tất cả các cách trên và nếu điều đó không hiệu quả với bạn, hãy thử CSS bên dưới giải quyết vấn đề cho tôi. Mà chỉ cho các trình duyệt không thêm bất kỳ phần đệm hoặc lề.

* {
  padding:0px;
  margin:0px;
 }

Nếu loại tài liệu của trang bạn đang đặt iframe trên là HTML5 thì bạn có thể sử dụng seamlessthuộc tính như vậy:

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

Tài liệu Mozilla về thuộc tính liền mạch

Trong biểu định kiểu của bạn thêm

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

}

Đây cũng là một lựa chọn khả thi.

Nếu bạn đang sử dụng iFrame để vừa với chiều rộng và chiều cao của toàn bộ màn hình, tôi cho rằng bạn không dựa trên kích thước 300x300, bạn cũng phải đặt lề cơ thể thành "0" như thế này:

<body style="margin:0px;">

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

Mã này sẽ hoạt động trong cả HTML 4 và 5.

Hoặc thêm thuộc tính frameBorder hoặc sử dụng kiểu có độ rộng đường viền 0px;, hoặc đặt kiểu đường viền bằng không.

sử dụng bất kỳ một từ dưới 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>

cũng đặt viền = "0px"

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

Thử

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

Điều này sẽ loại bỏ đường viền của khung hình của bạn.

Dùng cái này

style="border:none;

Thí dụ:

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

Để xóa đường viền, bạn có thể sử dụng thuộc tính viền CSS cho không.

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

Đơn giản chỉ cần thêm thuộc tính trong thẻ iframe frameborder = 0 <iframe src="" width="200" height="200" frameborder="0"></iframe>

1.Via Inline Style đặt viền: 0

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

2. Thông qua khung thuộc tính thẻBorder Đặt 0

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

3. nếu chúng ta có nhiều khung I Chúng ta có thể cung cấp lớp và đặt css vào bên trong hoặc bên ngoài.

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>

Tôi gặp vấn đề với viền trắng phía dưới và tôi không thể sửa nó với các quy tắc viền, lề & đệm ... Vì vậy, hãy thêm display:block;vì iframe là một thành phần nội tuyến.

Điều này có khoảng trắng trong HTML của bạn vào tài khoản.

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

Hoạt động với 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.