从IFrame移除边框

706

如何从网络应用程序中嵌入的iframe中删除边框？iframe的一个示例是：

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

假设背景颜色一致，我希望从页面上的内容到iframe的内容的过渡是无缝的。目标浏览器仅是IE6，不幸的是，其他浏览器的解决方案将无济于事。

— JoelB
source

您可以通过使用一个做到这一点很容易 iframe的发电机

— 山Eapen Koshy

2

只需在<style>标记内创建一个类似“ .nb {border：none;}”的类。然后在<iframe>标记内添加“ class =“ nb””。

— 吉姆（Jim）

1125

添加frameBorder属性（注意大写字母'B'）。

因此，它看起来像：

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

— 大卫·巴萨拉布（David Basarab）
source

3

我花了一点时间在JavaScript中弄清楚，您只需要element.frameBorder = 0。没有.style并使用0，不是'0'

— anderspitman

15

使用标记验证服务验证文档时frameBorder，由于不兼容HTML5，因此会导致错误：iframe元素上的frameborder属性已过时。改用CSS。 在HTML5中，我会将CSS属性设置为border:0。有没有一种方法可以使它向后兼容而不引起验证错误？

— 2015年

1

@ MatthewT.Baker当然，请参阅我对有关此属性的其他许多问题之一的回答：stackoverflow.com/a/20719286/1016716糟糕，我忘记了那里的大写字母B；我会编辑。

— 李斯特先生，2015年

15

@MartinAndersson caniuse.com/#feat=iframe-seamless表示完全不支持它。

— 蒂姆·布斯（TimBüthe）2015年

2

这里的答案是正确的，但是建议使用Seamless属性的注释不再正确。无缝属性已经从说明书中删除：w3.org/TR/2014/REC-html5-20141028/...

— 罗恩Ë

144

疯狂尝试删除IE7中的边框后，我发现frameBorder属性区分大小写。

你必须设置一个大写的FRAMEBORDER属性乙。

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

— 亚当
source

13

这是完全荒谬的！虽然好捕获。如此再次为我省去了许多小时的麻烦:)

— 亚历克斯

这将是一个救星，如果是正确的答案，因为它提到的资本乙。

— 卡拉什伊斯特万

1

注意：F12“调试器”中的frameborder属性更改将不会由IE6显示。而是在html代码中添加属性。

请注意，尽管JavaScript属性frameBorder带有大写字母B，但HTML属性实际上始终不区分大小写。在XHTML中，应该全部小写frameborder。

— 李斯特先生，

83

根据iframe文档，不推荐使用frameBorder，并且首选使用“ border” CSS属性：

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

注意CSS边框属性在IE6、7或8 中无法达到预期的效果。

— Roberto Chiaretti
source

54

除了添加frameBorder属性外，您可能还需要考虑将scrolling属性设置为“ no”，以防止出现滚动条。

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

— Xenox
source

1

HTML5中的等效功能是什么？

— 丹尼尔·斯普林格

3

style =“ overflow：hidden”

21

对于浏览器特定的问题，请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>

— Marnix胸罩
source

9

使用HTML iframe frameborder属性

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

注意：对IE 使用B帧顺序（第B章），否则将不起作用。但是，HTML5不支持iframe frameborder属性。因此，请改用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中新增的Seamless属性。仅Opera，Chrome和Safari支持iframe标记的Seamless属性。存在时，它指定iframe看起来应该是包含文档的一部分（无边框或滚动条）。到目前为止，只有Opera，Chrome和Safari支持该标签的Seamless属性。但是在不久的将来，它将成为标准解决方案，并将与所有浏览器兼容。http://www.w3schools.com/tags/att_iframe_seamless.asp

— Shubham Badal
source

9

您可以style="border:0;"在iframe代码中使用。这是在HTML5中删除边框的推荐方法。

查看我的html5 iframe生成器工具，以自定义iframe，而无需编辑代码。

— Shan Eapen Koshy
source

9

如果要删除框架的边框或任何可以使用style属性的内容，可以将Style属性用于 HTML5。如下

代码在这里

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

— 阿尔潘·塞尼（Arpan Saini）
source

7

添加frameBorder属性（大写字母“ B”）。

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

— 哈登·拉胡尔（Harden Rahul）
source

6

您也可以使用JavaScript进行此操作。它将找到所有iframe元素并在IE和其他浏览器中删除其边界（尽管您可以在非IE浏览器中设置“ border：none;”样式，而不使用JavaScript）。并且即使在生成iframe并将其放置在文档中之后，它也将起作用（例如，以纯HTML而非JavaScript添加的iframe）！

这似乎可行，因为在BOM表中创建了iframe之后，IE会创建边框，而不是像您期望的那样在iframe元素上创建边框，而是在iframe的内容上创建边框。（$ @＆*＃@ !!! IE !!!）

注意：（仅当）父窗口和iframe来自相同的来源（相同的域，端口，协议等）时，IE部分才起作用（当然）。否则，脚本将在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.
         }
   }

— J118
source

6

我尝试了上述所有方法，如果对您不起作用，请尝试以下CSS为我解决此问题。这只是告诉浏览器不要添加任何填充或边距。

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

— 向前
source

5

如果您要放置iframe的页面的文档类型是HTML5，则可以使用如下seamless属性：

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

Mozilla文档的Seamless属性

— 大卫·杜伊特
source

4

接缝是个好主意，但遗憾的是它没有得到很好的支持。caniuse.com/#search=seamless

— code_monk

4

完全不支持。

— skobaljic 2015年

5

在样式表中添加

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

}

这也是一个可行的选择。

— Tropilac
source

frameBorder不适用于我，但这确实适用。谢谢。

— 2015年

4

如果您要使用iFrame来适应整个屏幕的宽度和高度（我假设您不是基于300x300的尺寸），还必须将主体页边距设置为“ 0”，如下所示：

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

— 迈克尔·赫尔
source

4

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

此代码在HTML 4和HTML 5中均应适用。

— IamGuest
source

4

添加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>

展开摘要

— Divya Chugh
source

3

还设置border =“ 0px”

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

— 阿杰什·科拉卡丹（Ajesh Kolakkadan）
source

3

尝试

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

这将删除边框。

— 阿玛·伊克巴尔（Amaan Iqbal）
source

3

用这个

style="border:none;

例：

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

— 用户名
source

2

要删除边框，可以将CSS border属性设置为none。

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

— 用户名
source

1

其简单的只需在iframe代码frameborder = 0中添加属性 <iframe src="" width="200" height="200" frameborder="0"></iframe>

— 车丹·乔汉（Chetan Chauhan）
source

在回答问题之前，请务必阅读现有的答案。已经提供了这个答案。不要重复答案，而要对现有答案进行投票。在这里可以找到一些写出好的答案的准则。

— dferenc

0

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设置0

<iframe src="display_file.html" width="300" height="300" frameborder="0">Browser not compatible.</iframe>

3.如果我们有多个I Frame，我们可以给class并在内部或外部放置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>

— 萨米尔·拉哈尼（Samir Lakhani）
source

0

我的底部白色边框有问题，我无法使用边框，边距和填充规则对其进行修复...因此添加，display:block;因为iframe是内联元素。

这会将HTML中的空格考虑在内。

— En
source

-1

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

适用于Firefox;）

— 的灾难大师
source

也许有不同的问题？

-1

<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.

— 沙里亚里亚
source