删除 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 属性（注意 大写“B”).

所以它看起来像：

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

其他提示

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

您必须使用大写字母设置frameBorder属性乙.

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

按照内嵌框架文档中，frameBorder 已弃用，最好使用“border”CSS 属性：

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

注意 CSS border 属性不是在IE6、7或8中达到预期效果。

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

<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

笔记：使用框架乙为 IE 订购 (cap 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 中新增的无缝属性。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>

可以使用样式属性 对于 HTML5，如果您想删除框架的边框或任何内容，您可以使用 style 属性。如下所示

代码放在这里

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

您也可以通过 JavaScript 来完成此操作。它会找到任何 iframe 元素并删除 IE 和其他浏览器中的边框（尽管您可以设置“border”样式：none;”在非 IE 浏览器中而不是使用 JavaScript）。即使在生成 iframe 并将其放置在文档中之后使用（例如以纯 HTML 而不是 JavaScript 添加的 iframe）！

这似乎有效，因为 IE 创建边框，不是像您期望的那样在 iframe 元素上创建边框，而是在 BOM 中创建 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.
         }
   }

如果您放置 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 和 5 中工作。

还设置边框=“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属性，要么使用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>

要删除边框，您可以使用 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 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