没有边框的 iframe 并在弹出窗口中滚动答案

【问题标题】：Iframe without border and scroll in popup没有边框的 iframe 并在弹出窗口中滚动
【发布时间】：2013-11-07 08:29:15
【问题描述】：

我需要在新的弹出窗口中显示 iframe，以便 iFrame 看起来像子页面的正常内容，而不是 iframe。这是我正在使用的代码。

<html>
.
.
<a class="link" href="javascript:popup();">show popup</a>
.
.
</html>

通过单击显示弹出窗口，我正在调用 javascript 函数，我正在打开窗口。代码是：

window.open('../jsp/popupPage.jsp','targetWindow','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=1050,height=2000

而popupPage.jsp 包含以下内容：

<html>
<head>
<title>Cancellation Policy</title>
</head>
<body>

<span>Blah Blah</span>
<br /><br />
<iframe src="http://google.co.in" ></iframe>

</body>
</html>

现在的问题是 iframe 显示有边框并且滚动它看起来不太好。我想要像 iframe 内容这样的东西应该看起来像普通页面的内容以及 Blah Blah （iframe 内容）

我使用了 HTML5 的无缝属性，但仅适用于 chrome 浏览器。还有一点需要注意的是，我不能使用overflow="no"，因为我不确定来自第三个站点的iframe 页面的宽度和高度。

【问题讨论】：

也可以将seamless添加到你的iframe标签中。

标签： javascript jquery html css iframe

【解决方案1】：

您可以使用以下 CSS 去除边框：

iframe {
    border: none;
    outline: none;
    overflow: hidden;
}

如果您想扩展 iframe 的尺寸，则必须读取 iframe 内的文档尺寸并将其传递给父文档。这可以通过postMessage()函数实现。
将此 javascript 添加到 popupPage.jsp

<script>
    window.addEventListener('load', function() {
        window.parent.postMessage(document.body.clientWidth + ";" + document.body.clientHeight);
    }, false);
</script>

然后，在您的 popup() 函数中，就在 window.open 之前，您应该添加以下内容：

window.addEventListener('message', function(e) {
    var iframe = document.getElementById('iframe'); //or whatever your iframe is called
    var dimensions = e.data.split(";");
    iframe.width = dimensions[0];
    iframe.height = dimensions[1];
}, false);

要了解有关postMessage 和message 活动的更多信息，请阅读this MDN article。

【讨论】：

【解决方案2】：

请添加 frameBorder 和滚动，

<iframe src="URL" scrolling="no" frameBorder="0">Browser not supported</iframe>

更多关于框架和样式，您可以访问：http://webdesign.about.com/od/iframes/a/iframes-and-css.htm

【讨论】：

【解决方案3】：

您可以在声明 iframe 时添加以下标记。

 frameBorder="0"

你的标签应该是这样的

<iframe  frameBorder="0" src="http://google.co.in" ></iframe>

【讨论】：