Question

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中边界仍然可见。

Answer 1

将以下属性添加到iframe标记：

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

Answer 2

我在动态创建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);

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

Answer 3

我尝试了很多关于这个想法的变化，并最终使用了这些方面的东西。以为我会分享它。

<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中对它进行了测试，这对我来说很酷，它也可以验证。

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

Answer 4

成功！

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

这似乎有效，因为IE会创建边框，而不是iframe期望的iframe元素，而是iframe的内容 - 在BOM中创建iframe之后。（$ @＆amp; *＃@ !!! IE !!!）

注意：如果父窗口和iframe来自SAME源（相同的域，端口，协议等），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.
         }
   }

Answer 5

使用示例JS的示例HTML将有用=）

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

Answer 6

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

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

Answer 7

如果您希望代码验证，可以使用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);

IE 8 iframe边框

7 个答案: