Javascript 如何使 iFrame 在单击按钮时全屏显示？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33768509/
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
How to make an iFrame to go fullscreen on a button click?
提问by ssk
I would to make the iFrame to appear on fullscreen with a button click using JavaScript.
我希望使用 JavaScript 通过单击按钮使 iFrame 显示在全屏上。
<iframe id="iframe_view" class="embed-responsive-item container well well-small span6" style="height: 720px; width: 1280px; background-color: #2e2e2e;" src="https://www.google.com/" frameborder="0" scrolling="no" allowfullscreen>
回答by Jonathan Lam
You will have to do two things: make the window fullscreen, and then the <iframe>to fill up the whole size.
您必须做两件事：使窗口全屏，然后<iframe>填满整个大小。
You can make it go fullscreen with JS such as in this SO answer.
您可以使用 JS 使其全屏显示，例如在此 SO answer 中。
Then, to make it full size, just add a few styles, like below. What this JS script does is add a class with those styles to the <iframe>.
然后，要使其全尺寸，只需添加一些样式，如下所示。这个 JS 脚本所做的是将具有这些样式的类添加到<iframe>.
JS
JS
document.getElementsByTagName("iframe")[0].className = "fullScreen";
CSS
CSS
body, html {
height: 100%;
margin: 0;
}
.fullScreen {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
See this partially working* exampleon JSFiddle.
请参阅JSFiddle 上的此部分工作* 示例。
*partially working because JSFiddle doesn't allow the fullscreen method because it deems it unsafe. But it should work for you.
*部分工作，因为 JSFiddle 不允许全屏方法，因为它认为它不安全。但它应该适合你。
