javascript 没有边框的 iframe 并在弹出窗口中滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19636970/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Iframe without border and scroll in popup
提问by Chaman
I have a requirement to display a iframe in new popup window such that the iFrame should look like a normal content of the child page instead of iframe. Here is the code I am using.
我需要在新的弹出窗口中显示 iframe，这样 iFrame 应该看起来像子页面的正常内容而不是 iframe。这是我正在使用的代码。
<html>
.
.
<a class="link" href="javascript:popup();">show popup</a>
.
.
</html>
By Clicking the show popup, I am calling the javascript function there I am doing the window open. code is:
通过单击显示弹出窗口，我正在调用 javascript 函数，我正在打开窗口。代码是：
window.open('../jsp/popupPage.jsp','targetWindow','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=1050,height=2000
And popupPage.jsp Contains the following content:
并且 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>
Now the problem is iframe is displaying with border and scroll it doesn't looks good. I want something like iframe content should look like a content of normal page along with Blah Blah (iframe content)
现在的问题是 iframe 显示边框并滚动它看起来不太好。我想要类似 iframe 内容的内容应该看起来像普通页面的内容以及 Blah Blah（iframe 内容）
I have used seamless property of HTML5 but that works only with chrome browser. And one more point to note here is I can't use overflow="no" as I am not sure about the width and height of the iframe page coming from 3rd site.
我使用了 HTML5 的无缝属性，但仅适用于 chrome 浏览器。还有一点需要注意的是，我不能使用 overflow="no"，因为我不确定来自第三个站点的 iframe 页面的宽度和高度。
回答by LondonAppDev
You can add the following tag when you declare your iframe.
您可以在声明 iframe 时添加以下标记。
frameBorder="0"
Your tag would look like this
你的标签看起来像这样
<iframe frameBorder="0" src="http://google.co.in" ></iframe>
回答by matewka
You can use the following CSS to get rid of the borders:
您可以使用以下 CSS 去除边框：
iframe {
border: none;
outline: none;
overflow: hidden;
}
If you want to spread the iframe's dimensions, you would have to read the document dimensions inside the iframe and pass them to the parent document. This can be achieved by postMessage()function.
Add this javascript to the popupPage.jsp
如果要扩展 iframe 的尺寸，则必须读取 iframe 内的文档尺寸并将它们传递给父文档。这可以通过postMessage()函数来实现。
将此 javascript 添加到 popupPage.jsp
<script>
window.addEventListener('load', function() {
window.parent.postMessage(document.body.clientWidth + ";" + document.body.clientHeight);
}, false);
</script>
Then, in your popup()function, right before window.openyou should add this:
然后，在您的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);
To learn more about postMessageand messageevent read this MDN article.
要了解有关事件的更多信息postMessage，请message阅读这篇 MDN 文章。
回答by Krish R
Please add the frameBorder and scrolling,
请添加frameBorder和滚动，
<iframe src="URL" scrolling="no" frameBorder="0">Browser not supported</iframe>
More about Frames and Styling, you can visit: http://webdesign.about.com/od/iframes/a/iframes-and-css.htm
更多关于框架和样式，你可以访问：http: //webdesign.about.com/od/iframes/a/iframes-and-css.htm
