Удалить границу из IFrame


707

Как бы я удалил границу из встроенного в мое веб-приложение iframe? Примером iframe является:

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

Мне бы хотелось, чтобы переход с содержимого на моей странице к содержимому iframe был плавным, при условии, что цвета фона совпадают. Целевым браузером является только IE6, и, к сожалению, решения для других не помогут.


Вы можете сделать это легко, используя генератор iframe
Shan Eapen Koshy

2
Просто создайте класс, подобный ".nb {border: none;}" внутри тега <style>. Затем добавьте "class =" nb "" внутри тега <iframe>.
Джим

Ответы:


1126

Добавьте frameBorderатрибут (обратите внимание на заглавную букву 'B' ).

Так это будет выглядеть так:

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

3
Я потратил минуту, чтобы понять в JavaScript, что вам просто нужно element.frameBorder = 0. no .style и используйте 0, а не '0'
anderspitman

15
При проверке документа с использованием службы проверки разметки frameBorder возникает ошибка, так как он не соответствует HTML5: атрибут frameborder в элементе iframe устарел. Вместо этого используйте CSS. В HTML5 я бы установил свойство CSS border:0. Есть ли способ сделать его обратно совместимым, не вызывая ошибок проверки?
ʙᴀᴋᴇʀ ʙᴀᴋᴇʀ

1
@ MatthewT.Baker Конечно, смотрите мой ответ на один из множества других вопросов об этом атрибуте: stackoverflow.com/a/20719286/1016716 Ой, я вижу, я забыл там заглавную букву B; Я отредактирую
Мистер Листер

15
@MartinAndersson caniuse.com/#feat=iframe-seamless утверждает, что он вообще не поддерживается.
Тим Бюте

2
Ответ здесь верный, однако комментарии, предлагающие использование бесшовного атрибута, более не верны. Атрибут seamless был удален из спецификации: w3.org/TR/2014/REC-html5-20141028/…
Ron E

145

После сумасшествия, пытаясь удалить границу в IE7, я обнаружил, что атрибут frameBorder чувствителен к регистру.

Вы должны установить атрибут frameBorder с заглавной B .

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

13
Это совершенно нелепо! Хороший улов, хотя. ТАК спас мне много часов неприятностей снова :)
Алекс

было бы спаситель , если был правильный ответ, потому что он упоминает капитал B .
KARASZI István

1
ПРИМЕЧАНИЕ: изменения атрибута frameborder в F12 «отладчик» не будут отображаться IE6. Вместо этого добавьте атрибут в HTML-код.

Обратите внимание, что, хотя свойство JavaScript имеет frameBorderпрописную букву B, атрибут HTML фактически всегда не учитывает регистр. А в XHTML все должно быть в нижнем регистре frameborder.
Мистер Листер

83

Согласно документации iframe , frameBorder устарел, и использование CSS-атрибута border является предпочтительным:

<iframe src="test.html" style="width: 100%; height: 400px; border: 0"></iframe>
  • Примечание CSS границы свойство делает не достичь желаемых результатов в IE6, 7 или 8.

54

В дополнение к добавлению атрибута frameBorder вам может потребоваться установить для атрибута прокрутки значение «нет», чтобы полосы прокрутки не появлялись.

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

1
Каков его эквивалент в HTML5?
Даниэль Спрингер

3
style = "overflow: hidden"

21

Для проблем, связанных с браузером, также добавьте в frameborder="0" hspace="0" vspace="0" marginheight="0" marginwidth="0"соответствии с 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>

9

Используйте HTML атрибут iframe frameborder

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

Примечание: используйте порядок кадров B (cap B) для IE, иначе не будет работать. Но атрибут iframe frameborder не поддерживается в HTML5. Так что используйте CSS вместо этого.

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

Вы также можете удалить прокрутку с помощью атрибута прокрутки http://www.w3schools.com/tags/att_iframe_scrolling.asp

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

Также вы можете использовать бесшовный атрибут, который является новым в HTML5. Атрибут бесшовного тега iframe поддерживается только в Opera, Chrome и Safari. Когда он присутствует, он указывает, что iframe должен выглядеть так, как будто он является частью содержащего документ (без границ или полос прокрутки). На данный момент атрибут бесшовного тега поддерживается только в Opera, Chrome и Safari. Но в ближайшее время это будет стандартное решение и будет совместимо со всеми браузерами. http://www.w3schools.com/tags/att_iframe_seamless.asp


9

Вы можете использовать style="border:0;"в своем коде iframe. Это рекомендуемый способ удалить границу в HTML5.

Проверьте мой HTML5 генератор инструментов iframe , чтобы настроить свой iframe без редактирования кода.


9

Свойство style можно использовать для HTML5, если вы хотите удалить boder вашего фрейма или все, что вы можете использовать свойство style. как указано ниже

Код идет здесь

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


6

Вы также можете сделать это с помощью JavaScript таким образом. Он найдет любые элементы iframe и удалит их границы в IE и других браузерах (хотя вы можете просто установить стиль «border: none;» в браузерах не IE вместо использования JavaScript). И это будет работать, даже если используется ПОСЛЕ того, как iframe сгенерирован и размещен в документе (например, iframe, которые добавляются в обычном HTML, а не в JavaScript)!

Кажется, это работает, потому что IE создает границу не на элементе iframe, как вы ожидаете, а на СОДЕРЖАНИИ элемента iframe - после создания элемента iframe в спецификации. ($ @ & * # @ !!! То есть !!!)

Примечание. Часть IE будет работать (конечно) только в том случае, если родительское окно и iframe имеют то же происхождение (тот же домен, порт, протокол и т. Д.). В противном случае скрипт получит ошибки «отказано в доступе» в консоли ошибок IE. Если это произойдет, ваш единственный вариант - установить его до того, как он будет сгенерирован, как отметили другие, или использовать нестандартный атрибут frameBorder = "0". (или просто позвольте IE выглядеть беспорядочно - мой любимый вариант;))

У меня ушло МНОГО часов работы до отчаяния, чтобы понять это ...

Наслаждаться. :)

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

Я попробовал все вышеперечисленное, и если это не сработало, попробуйте следующий CSS-код, который решил проблему для меня. Который просто говорит браузерам не добавлять никаких отступов или полей.

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

5

Если doctype страницы, на которой вы размещаете iframe - это HTML5, то вы можете использовать seamlessатрибут следующим образом:

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

Документы Mozilla о бесшовном атрибуте


4
Швы, как отличная идея, но, к сожалению, не очень хорошо поддерживается. caniuse.com/#search=seamless
code_monk

4
Это вообще не поддерживается.
skobaljic

5

В вашей таблице стилей добавить

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

}

Это также жизнеспособный вариант.


frameBorder не работает для меня, но это сработало. Спасибо.
Дойс

4

Если вы используете iFrame, чтобы соответствовать ширине и высоте всего экрана, что, как я полагаю, не основано на размере 300x300, вы также должны установить поля тела на «0», например:

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

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

Этот код должен работать как в HTML 4, так и в 5.


4

Либо добавьте атрибут frameBorder, либо используйте стиль с border-width 0px; либо установите стиль границы равным none.

используйте любой из нижеприведенных 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>




3

Использовать этот

style="border:none;

Пример:

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

2

Чтобы удалить границу, вы можете использовать свойство CSS border для none.

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

1

Просто добавьте атрибут в тег iframe frameborder = 0 <iframe src="" width="200" height="200" frameborder="0"></iframe>


Прежде чем ответить на вопрос, всегда читайте существующие ответы. Этот ответ уже был предоставлен. Вместо того, чтобы повторять ответ, проголосуйте за существующий ответ. Некоторые рекомендации по написанию хороших ответов можно найти здесь .
dferenc

0

1. Граница набора встроенного стиля: 0

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

2. С помощью атрибута тега FrameBorder Set 0

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

3. Если у нас есть несколько I-кадров, мы можем дать класс и поставить CSS внутри или снаружи.

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>

0

У меня была проблема с нижней белой рамкой, и я не мог исправить ее с помощью правил border, margin и padding ... Поэтому добавьте, display:block;потому что iframe является встроенным элементом.

Это учитывает пробелы в вашем HTML.



-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.
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.