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

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

646 голосов
/ 15 сентября 2008

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

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

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

Ответы [ 23 ]

1054 голосов
/ 15 сентября 2008

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

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

<iframe src="myURL" width="300" height="300" frameBorder="0">Browser not compatible.</iframe>
142 голосов
/ 03 ноября 2008

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

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

<iframe frameBorder="0" ></iframe>
65 голосов
/ 09 декабря 2011

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

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

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

<iframe src="myURL" width="300" height="300" frameBorder="0" scrolling="no">Browser not compatible. </iframe > 
21 голосов
/ 01 февраля 2011

Для специфических проблем браузера также добавьте 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 голосов
/ 10 июля 2014

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

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

Примечание: используйте кадр B порядок (колпачок 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

8 голосов
/ 23 октября 2015

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

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

7 голосов
/ 11 февраля 2017

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

Код идет сюда

<iframe src="demo.htm" style="border:none;"></iframe>
7 голосов
/ 16 марта 2016

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

<iframe src="myURL" width="300" height="300" frameBorder="0">Browser not compatible. </iframe>
6 голосов
/ 24 января 2012

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

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

Примечание. Часть 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.
         }
   }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...