如何使iFrame在點擊按鈕上全屏顯示？

Question

我想讓iFrame出現在全屏幕上，用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> 

Answer 1

你必須做兩件事情：使窗口全屏，然後，填補了全尺寸。

你可以使它與全屏JS，如在this SO answer。

然後，要使其完整尺寸，只需添加幾個樣式，如下所示。 JS腳本所做的是將這些樣式的類添加到。

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不允許全屏方法，因爲它認爲它不安全。但它應該適合你。}