如何让iFrame在点击按钮时全屏显示？

Question

我想通过使用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>

Answer 1

你将不得不做两件事:使窗口全屏,然后<iframe>填充整个大小.

您可以使用JS进行全屏显示,例如在此SO答案中.

然后,为了使其完整尺寸,只需添加一些样式,如下所示.这个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;
}

在JSFiddle上看到这个部分工作的例子.

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