it-swarm-vi.tech

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 việc chuyển từ nội dung trên trang của tôi sang nội dung của iframe phải 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.

645
JoelB

Thêm thuộc tính frameBorder (lưu ý capital B, ).

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

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

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 phải đặt thuộc tính frameBorder bằng chữ hoaB.

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

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 không đạt được kết quả mong muốn trong IE6, 7 hoặc 8.
64
Roberto Chiaretti

Ngoài việc thêm thuộc tính frameBorder, bạn có thể muốn xem xét việc đặ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 > 
53
xenox

Đố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>
21
Marnix Bras

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 khungBorder (cap 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 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 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

9
Shubham Badal

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

Kiểm tra trình 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ã.

8
Shan Eapen Koshy

Thuộc tính kiểu có thể được sử dụng Đối với HTML5 nếu bạn muốn xóa viền của khung hoặc bất kỳ 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>
7
Arpan Saini

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

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

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 thuộc tính seamless như vậy:

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

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

6
David Tuite

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à xóa 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 "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 đến từ SAME Origin (cùng tên miền, cổng, giao thức, v.v.). Nếu không, tập lệnh sẽ gặp 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.
         }
   }
6
FirstFraktal

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.

5
Tropilac

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 dưới đây đã 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;
 }
5
th0ward
<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.

4
IamGuest

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;">
4
Michael Herr

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

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

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.

2
Amaan Iqbal

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

Dùng cái này

style="border:none;

Thí dụ:

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

Đơ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
Chetan Chauhan

Để 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>
1
user8349297