Question

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

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

通过单击show popup，我在那里调用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”，因为我不确定来自第3站点的iframe页面的宽度和高度。

Answer 1

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

 frameBorder="0"

您的标记看起来像这样

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

Answer 2

您可以使用以下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 。

Answer 3

请添加frameBorder并滚动

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

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

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

3 个答案: