it-swarm-ru.tech

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

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

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

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

649
JoelB

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

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

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

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

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

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

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

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

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

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

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

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

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

Проверьте мой html5 iframe generator инструмент для настройки вашего iframe без редактирования кода.

8
Shan Eapen Koshy

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

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

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

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

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

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

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

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

6
David Tuite

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

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

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

}

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

5
Tropilac

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

* {
  padding:0px;
  margin:0px;
 }
5
th0ward
<iframe src="mywebsite" frameborder="0" style="border: 0px solid white;">HTML iFrame is not compatible with your browser</iframe>

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

4
IamGuest

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

<body style="margin:0px;">
4
Michael Herr

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

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

Пытаться

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

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

2
Amaan Iqbal

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

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

style="border:none;

Пример:

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

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

1
Chetan Chauhan

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

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