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

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

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

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

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

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

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

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

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

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

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

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

• Примечание CSS границы свойство делает не достичь желаемых результатов в IE6, 7 или 8.

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

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

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

Используйте 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

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

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

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

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

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

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

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

Вы также можете сделать это с помощью 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.
         }
   }

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

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

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

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

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

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

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

}

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

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

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

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

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

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

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

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

Пытаться

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

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

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

style="border:none;

Пример:

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

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

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

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

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>

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

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

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

Работает с 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.