不带边框的Iframe和在弹出窗口中滚动
提问于 2013-10-28 14:09:00
我有一个要求显示在新的弹出窗口中的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=2000popupPage.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内容应看起来像一个正常的网页内容与布拉布拉(iframe内容)
我使用了HTML5的无缝属性，但它只适用于chrome浏览器。还有一点需要注意的是，我不能使用overflow="no“，因为我不确定来自第三个站点的iframe页面的宽度和高度。
回答 3
Stack Overflow用户
发布于 2013-10-28 14:11:49
您可以在声明iframe时添加以下标记。
frameBorder="0"您的标记将如下所示
<iframe frameBorder="0" src="http://google.co.in" ></iframe>Stack Overflow用户
发布于 2013-10-28 14:13:04
您可以使用以下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事件的更多信息，请阅读。
Stack Overflow用户
发布于 2013-10-28 14:12:08
请添加frameBorder和滚动，
<iframe src="URL" scrolling="no" frameBorder="0">Browser not supported</iframe>有关框架和样式的更多信息，请访问：http://webdesign.about.com/od/iframes/a/iframes-and-css.htm
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19636970
复制![[android] 网络html查看器](https://ask.qcloudimg.com/http-save/yehe-2504969/8rwnlskith.png)
腾讯云开发者
