如何使 iFrame 在单击按钮时进入全屏?
How to make an iFrame to go fullscreen on a button click?
我会使用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>
你必须做两件事:使 window 全屏,然后 <iframe>
填满整个尺寸。
您可以使用 JS 使其全屏,例如 this SO answer。
然后,要使其成为全尺寸,只需添加一些样式,如下所示。这个 JS 脚本所做的是将具有这些样式的 class 添加到 <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;
}
参见 JSFiddle 上的 this partially working* example。
*部分工作,因为 JSFiddle 不允许全屏方法,因为它认为它不安全。但它应该适合你。
我会使用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>
你必须做两件事:使 window 全屏,然后 <iframe>
填满整个尺寸。
您可以使用 JS 使其全屏,例如 this SO answer。
然后,要使其成为全尺寸,只需添加一些样式,如下所示。这个 JS 脚本所做的是将具有这些样式的 class 添加到 <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;
}
参见 JSFiddle 上的 this partially working* example。
*部分工作,因为 JSFiddle 不允许全屏方法,因为它认为它不安全。但它应该适合你。