你如何编写一个按钮，可以让iframe在点击时全屏显示？

Question

如何在点击按钮时制作iframe全屏？我搜索但是提供的仅显示如何使窗口全屏，而不是iframe。请帮助，我正在尝试使嵌入式iframe在点击时变为全屏。谢谢！

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

请参阅JSFiddle上的this partially working* example。

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