ボタンをクリックして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

あなたは二つのことを行う必要があります：ウィンドウのフルスクリーンを作り、その後、は、全体の大きさを埋めるために。

this SO answerのようにJSで全画面表示にすることができます。

次に、フルサイズにするには、以下のようなスタイルをいくつか追加します。この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は安全でないと判断されているため、JSFiddleは全画面表示を許可していないため、部分的に動作します。しかしそれはあなたのために働くはずです。}