javascript - 如何使 iFrame 在单击按钮时进入全屏？

Question

我想让 iFrame 通过使用 JavaScript 单击按钮全屏显示。

<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>

Answer 1

您必须做两件事:使窗口全屏显示，然后 <iframe>填满整个尺寸。

您可以使用 JS 使其全屏显示，例如 this SO answer .

然后，要使其成为全尺寸，只需添加一些样式，如下所示。这个 JS 脚本所做的是将具有这些样式的类添加到 <iframe> .

JS

document.getElementsByTagName("iframe")[0].className = "fullScreen";

CSS

body, html {
    height: 100%;
    margin: 0;
}
.fullScreen {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

参见 this partially working* example在 JSFiddle 上。

_{*部分工作，因为 JSFiddle 不允许全屏方法，因为它认为它不安全。但它应该适合你。}