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

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

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

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

15.09.2008 17:43:53
Вы можете сделать это легко, используя генератор iframe
Shan Eapen Koshy 29.09.2015 01:26:59
Просто создайте класс, подобный ".nb {border: none;}" внутри тега <style>. Затем добавьте "class =" nb "" внутри тега <iframe>.
Jim 7.04.2016 12:27:37
25 ОТВЕТОВ
РЕШЕНИЕ

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

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

<iframe src="myURL" width="300" height="300" frameBorder="0">Browser not compatible.</iframe>
1114
19.11.2017 05:22:53
Мне понадобилось минута, чтобы понять, в JavaScript вам просто нужно element.frameBorder = 0. no .style и используйте 0, а не '0'
anderspitman 2.08.2014 23:34:00
При проверке документа с использованием службы проверки разметки frameBorder возникает ошибка, поскольку она не соответствует HTML5: атрибут frameborder в элементе iframe устарел. Вместо этого используйте CSS. В HTML5 я бы установил свойство CSS border:0. Есть ли способ сделать его обратно совместимым, не вызывая ошибок проверки?
ᴍᴀᴛᴛ ʙᴀᴋᴇʀ 26.02.2015 11:31:39
@ MatthewT.Baker Конечно, смотрите мой ответ на один из многих других вопросов об этом атрибуте: stackoverflow.com/a/20719286/1016716 Ой, я вижу, я забыл там заглавную букву B; Я отредактирую
Mr Lister 9.04.2015 07:24:39
@MartinAndersson caniuse.com/#feat=iframe-seamless утверждает, что он вообще не поддерживается.
Tim Büthe 19.06.2015 11:19:44
Ответ здесь верный, однако комментарии, предлагающие использование бесшовного атрибута, более не верны. Атрибут seamless был удален из спецификации: w3.org/TR/2014/REC-html5-20141028/…
Ron E 18.10.2016 16:49:24

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

<iframe src="myURL" width="300" height="300" frameBorder="0" scrolling="no">Browser not compatible. </iframe > 
54
21.02.2012 09:37:03
Каков его эквивалент в HTML5?
Daniel Springer 10.10.2016 16:09:41
style = "overflow: hidden"
user7892745 23.04.2017 02:11:37

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

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

<iframe frameBorder="0"></iframe>
144
15.04.2020 17:30:16
Это совершенно нелепо! Хороший улов, хотя. ТАК спас мне много часов неприятностей снова :)
Alex 10.12.2009 07:04:47
было бы спаситель , если был правильный ответ, потому что он упоминает капитал B .
KARASZI István 30.03.2010 12:52:05
ПРИМЕЧАНИЕ: изменения атрибута frameborder в F12 «отладчик» не будут отображаться IE6. Вместо этого добавьте атрибут в HTML-код.
user932567 7.09.2011 11:15:56
Обратите внимание, что, хотя свойство JavaScript имеет frameBorderпрописную букву B, атрибут HTML фактически всегда не учитывает регистр. А в XHTML все должно быть в нижнем регистре frameborder.
Mr Lister 11.12.2019 08:05:07

Для проблем, связанных с браузером, также добавьте 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>
21
18.12.2015 15:35:17

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

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

Вы также можете сделать это с помощью 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
24.01.2012 01:10:47

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

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

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

6
3.07.2013 15:06:19
Швы, как отличная идея, но, к сожалению, не очень хорошо поддерживается. caniuse.com/#search=seamless
code_monk 26.10.2014 13:32:03
Это вообще не поддерживается.
skobaljic 10.04.2015 10:29:16
iframe src="XXXXXXXXXXXXXXX"
marginwidth="0" marginheight="0" width="xxx" height="xxx"

Работает с Firefox;)

-1
15.01.2014 17:06:16
другой вопрос возможно?
user7892745 23.04.2017 02:13:09

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

* {
  padding:0px;
  margin:0px;
 }
5
12.06.2014 19:43:04

Используйте атрибут 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
10.07.2014 07:45:21

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

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

}

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

5
30.04.2015 12:15:14
frameBorder не работает для меня, но это сработало. Спасибо.
Dois 2.10.2015 08:45:44

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

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

9
23.10.2015 03:23:58

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

<iframe src="myURL" width="300" height="300" frameBorder="0">Browser not compatible. </iframe>
7
16.03.2016 06:17:02

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

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

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

4
3.09.2016 13:59:15

также установите border = "0px"

 <iframe src="yoururl" width="100%" height="100%" frameBorder="0"></iframe>
3
5.01.2017 12:17:16

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

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

<iframe src="demo.htm" style="border:none;"></iframe>
9
11.02.2017 11:27:09

Пытаться

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

Это удалит границу вашего кадра.

3
1.07.2017 08:31:08

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

<iframe src="myURL" width="300" height="300" style="border: none">Browser not compatible.</iframe>
2
22.07.2017 09:10:28

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

style="border:none;

Пример:

<iframe src="your.html" style="border:none;"></iframe>
3
17.09.2017 08:01:39

Либо добавьте атрибут 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>

4
9.01.2018 10:30:09

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

1
18.02.2018 21:08:35
Прежде чем ответить на вопрос, всегда читайте существующие ответы. Этот ответ уже был предоставлен. Вместо того, чтобы повторять ответ, проголосуйте за существующий ответ. Некоторые рекомендации по написанию хороших ответов можно найти здесь .
dferenc 18.02.2018 21:31:55
<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.
-1
7.09.2018 19:43:22

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
11.02.2020 10:59:34

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

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

0
20.03.2020 10:31:00