Удалить границу из IFrame
Как мне удалить границу из iframe встроено в мое веб-приложение? Примером iframe является:
<iframe src="myURL" width="300" height="300">Browser not compatible.</iframe>
Я хотел бы перейти от содержания на моей странице к содержанию iframe быть бесшовным, предполагая, что цвета фона являются последовательными. Целевым браузером является только IE6, и, к сожалению, решения для других не помогут.
27 ответов
Добавить 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 border не дает желаемых результатов в 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>
Ты можешь использовать style="border:0;" в вашем коде iframe. Это рекомендуемый способ удалить границу в HTML5.
Посмотрите мой HTML-генератор инструментов iframe, чтобы настроить свой iframe без редактирования кода.
Свойство style можно использовать для HTML5, если вы хотите удалить boder вашего фрейма или все, что вы можете использовать свойство style. как указано ниже
Код идет здесь
<iframe src="demo.htm" style="border:none;"></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
Вы также можете сделать это с помощью 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;
}
Добавьте атрибут frameBorder (заглавная 'B').
<iframe src="myURL" width="300" height="300" frameBorder="0">Browser not compatible. </iframe>
В вашей таблице стилей добавить
{
padding:0px;
margin:0px;
border: 0px
}
Это также жизнеспособный вариант.
Либо добавьте атрибут 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>Если вы используете iFrame, чтобы соответствовать ширине и высоте всего экрана, что, как я предполагаю, не основано на размере 300x300, вы также должны установить поля тела на "0", например:
<body style="margin:0px;">
Если doctype страницы, на которой вы размещаете iframe - HTML5, то вы можете использовать seamless атрибут так:
<iframe src="..." seamless="seamless"></iframe>
<iframe src="mywebsite" frameborder="0" style="border: 0px solid white;">HTML iFrame is not compatible with your browser</iframe>
Этот код должен работать как в HTML 4, так и в 5.
Пытаться
<iframe src="url" style="border:none;"></iframe>
Это удалит границу вашего кадра.
Также установите border="0px "
<iframe src="yoururl" width="100%" height="100%" frameBorder="0"></iframe>
Использовать этот
style="border:none;
Пример:
<iframe src="your.html" style="border:none;"></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 Frame, мы можем дать класс и поместить 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>
Чтобы удалить границу, вы можете использовать свойство 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>
для меня добавление сработало отлично
.iframe{
box-shadow: none !important;
}
это решение особенно актуально для темы shopify, которую я редактирую. Тема shopify использует iframe по-разному на протяжении всей темы, и один из них дал сбой. Мне пришлось зайти в css вручную и переопределить атрибут css.
У меня была проблема с нижней белой рамкой, и я не мог исправить ее с помощью правил границы, полей и заполнения... Так что добавьте display:block; потому что iframe - это встроенный элемент.
При этом учитываются пробелы в вашем HTML.
<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.
попробуйте этот код
<iframe src="myURL" frameBorder="0">Browser not compatible.</iframe>
iframe src="XXXXXXXXXXXXXXX"
marginwidth="0" marginheight="0" width="xxx" height="xxx"
Работает с Firefox;)