没有边框的 iframe 并在弹出窗口中滚动
Posted
技术标签:
【中文标题】没有边框的 iframe 并在弹出窗口中滚动【英文标题】：Iframe without border and scroll in popup 【发布时间】：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标签中。
【参考方案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>
【讨论】：
以上是关于没有边框的 iframe 并在弹出窗口中滚动的主要内容，如果未能解决你的问题，请参考以下文章