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

Question

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

21

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

- ssk

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jonathan Lam · Accepted Answer

你需要做两件事情：将窗口设置为全屏，然后使 <iframe> 填满整个大小。

你可以使用类似于这个SO答案中的JS代码来使其全屏。

然后，只需添加一些样式，如下所示即可让它占满整个空间。这个JS脚本所做的是将这些样式添加到 <iframe> 的类中。

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

在JSFiddle上查看此部分工作的示例。

_{*部分工作，因为JSFiddle认为全屏模式不安全而不允许使用。但是对您应该可以正常工作。}