如何让iFrame在点击按钮时全屏显示？ [英] How to make an iFrame to go fullscreen on a button click?

问题描述

我想通过点击按钮使用iFrame来全屏显示。

I would to make the iFrame to appear on fullscreen with a button click using 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>

推荐答案

你必须做两件事：做窗户全屏，然后< iframe> 来填充整个尺寸。

You will have to do two things: make the window fullscreen, and then the <iframe> to fill up the whole size.

你可以全屏显示使用JS，如此SO答案。

You can make it go fullscreen with JS such as in this SO answer.

然后，要使它全尺寸，只需添加一些样式，如下所示。这个JS脚本的作用是将一个带有这些样式的类添加到< iframe> 。

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

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没有允许全屏方法，因为它认为它不安全。但它应该适合你。}

这篇关于如何让iFrame在点击按钮时全屏显示？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！