IE 8 iframe 边框答案

【问题标题】：IE 8 iframe borderIE 8 iframe 边框
【发布时间】：2010-12-10 04:42:46
【问题描述】：

iframe 上有一个边框，我无法摆脱它。

IE 6 和 7 使用少量 JavaScript 即可正常工作：

function test(){
    var iframe = document.getElementById('frame2');
    iframe.contentWindow.document.body.style.backgroundColor = "#a31d1d";
    iframe.contentWindow.document.body.style.border = "#a31d1d";
    iframe.contentWindow.document.body.style.outlineColor = "#a31d1d";
}

但边框在 IE 8 中仍然可见。

【问题讨论】：

StackOverflow 在您输入问题的文本区域下方有一个很棒的预览区域。下次发布前使用该预览修复格式。

标签： javascript html css iframe internet-explorer-8

【解决方案1】：

如果您希望您的代码验证您可以使用 javascript 来执行此操作。几个月前遇到这个问题时，我找到了完美的答案here

var iframe = document.createElement("iframe");
 iframe.src = "banner_728x90.gif";
 iframe.width = "728";
 iframe.height = "90";
 iframe.frameBorder = "0";
 iframe.scrolling = "no";
 document.body.appendChild(iframe);

如果您想在 iframe 中无缝加载另一个页面，则可以将此代码复制并粘贴到页面头部。我在一个有免费脚本的网站上找到了它。大多数情况下性能都不错

function getDocHeight(doc) {
    doc = doc || document;
    var body = doc.body, html = doc.documentElement;
    var height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight );
    return height;
}
function setIframeHeight(id) {
    var ifrm = document.getElementById(id);
    var doc = ifrm.contentDocument? ifrm.contentDocument: ifrm.contentWindow.document;
    ifrm.style.visibility = 'hidden';
    ifrm.style.height = "10px"; // reset to minimal height in case going from longer to shorter doc
    ifrm.style.height = getDocHeight( doc ) + 10 + "px";
    ifrm.style.visibility = 'visible';
}

然后你给你的 iframe 一个 id 并在加载时调用脚本。就是这样。

var iframe = document.createElement("iframe");
 iframe.setAttribute('id', "ifrm1");
 iframe.setAttribute('src', 'http://www.hekcmviw.com/'); // change the URL
 iframe.setAttribute('width', '100%');
 iframe.setAttribute('height', '10');
 iframe.setAttribute('frameBorder', '0');
 iframe.setAttribute('scrolling', 'no');
 iframe.setAttribute('onload' ,"setIframeHeight(this.id)");
 document.body.appendChild(iframe);

【讨论】：

【解决方案2】：

为 iframe 标签添加以下属性：

marginheight="0" marginwidth="0" frameborder="0"

【讨论】：

我尝试使用 jQuery 实用地添加这些，但 IE8 似乎只是忽略了它们；在浪费了太多时间试图隐藏边框之后（这是一个多么微不足道的任务啊？）我使用硬编码属性来强制 IE8 使用它。 “为什么IE这么垃圾！？”是我今天最喜欢的短语 - 是的，我正在跨浏览器测试:-D。呵呵。感谢您解决这个问题！
仅供参考：不幸的是，在文档中添加一个内联的 frameborder 属性会使文档永远无法验证 HTML 5。但似乎没有其他方法可以解决这个问题。
frameborder="0" 移除了 ie8 上 iframe 的边框
是的，这很有道理...添加三个我以前从未使用过的 html 属性。谢谢！
IE8 中仍然有一条黑线

【解决方案3】：

成功了！

试试这个。它会在 IE 和其他浏览器中找到任何 iframe 元素并删除它们的边框（尽管您可以在非 IE 浏览器中设置“border : none;”样式而不是使用 JavaScript）。并且即使在 iframe 生成并在文档中就位之后使用它也能工作（例如，以纯 HTML 而不是 JavaScript 添加的 iframe）！

这似乎可行，因为 IE 创建边框，而不是像您期望的那样在 iframe 元素上，而是在 iframe 的 CONTENT 上——在 iframe 在 BOM 中创建之后。 ($@&*#@!!! 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.
         }
   }

【讨论】：

【解决方案4】：

我尝试了很多关于这个想法的变体，最终使用了一些类似的东西。我想我会分享它。

<script type="text/javascript">
   url = 'http://www.dollypower.com';
   title = 'Dolly Power';
   width = '660';
   height = '430';
    document.write('<iframe src='+url+' title='+title+' width='+width+' height='+height+' frameborder=0></iframe>');
 </script>

然后我使用noscript标签为非JS用户输入了一个替代方案，即：

<noscript><p><a href="http://www.dollypower.com" target="_blank">Please click here for Dolly Power</a></p></noscript>

我在 IE8 中对其进行了测试，这对我来说很酷，而且它也可以验证。

希望这可以帮助那里的人！

【讨论】：

【解决方案5】：

我在动态创建 iframe 时遇到了同样的问题，结果发现设置边框属性 AFTER 将 iframe 添加到文档有 NO 效果：

以下代码显示 3d 边框：

var iframe = document.createElement("IFRAME");
iframe.src = "http:www.stackoverflow.com";
//Iframe added BEFORE setting border properties.
document.body.appendChild(iframe);
iframe.frameBorder = "no";

但这实际上删除了它：

var iframe = document.createElement("IFRAME");
iframe.src = "http:www.stackoverflow.com";
iframe.frameBorder = "no";
//Iframe added AFTER setting border properties.
document.body.appendChild(iframe);

希望这将有助于解决您的问题。

【讨论】：

【解决方案6】：

请记住，这可能是 IE 不遵守 css 中的边框设置，~~而 iframe 元素上属性BORDER=0 的传统设置可能有效。至少值得一试。~~

编辑：看起来解决问题的方法是在 iframe 元素上设置 frameborder='0'。至少对我有用。

【讨论】：

【解决方案7】：

与示例 JS 一起使用的示例 HTML 会有所帮助 =)

尝试使用 IE8 的开发人员工具（在您遇到问题的页面上按 F12）来隔离正在应用到 iframe 的样式。您还可以在那里使用样式，以减少迭代时间。

【讨论】：