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

https://stackoverflow.com/questions/65034

09-06-2019
|

Вопрос

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

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

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

Решение

Добавить frameBorder атрибут (обратите внимание на заглавная буква «Б»).

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

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

Другие советы

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

Вам необходимо установить атрибутframeBorder с заглавной буквы. Б.

<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

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

Примечание:использовать рамкуБзакажите (шапка Б) для IE, иначе не получится.Но атрибут рамки iframe не поддерживается в 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 без редактирования кода.

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

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

Свойство Style можно использовать В HTML5, если вы хотите удалить рамку фрейма или что-то еще, вы можете использовать свойство style.как указано ниже

Код находится здесь

<iframe src="demo.htm" style="border:none;"></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.
         }
   }

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

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

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

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

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

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

{
  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, так и в HTML 5.

также установите 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>

Либо добавьте атрибутframeBorder, либо используйте стиль с шириной границы 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>

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

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

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

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.

Лицензировано под: CC-BY-SA с атрибуция

Не связан с StackOverflow