web-dev-qa-db-ja.com

ボタンのクリックでiFrameを全画面表示にする方法は？

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>
javascriptiframeonclickfullscreen
11
ssk

ウィンドウを全画面表示にすること、次に<iframe>を使用してサイズ全体を埋める必要があります。

this SO answer のように、JSでフルスクリーンにすることができます。

次に、フルサイズにするには、以下のようないくつかのスタイルを追加します。この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の この部分的に機能する*の例 を参照してください。

* JSFiddleは安全でないと判断してフルスクリーンメソッドを許可しないため、部分的に機能します。しかし、それはあなたのために働くはずです。

14
Jonathan Lam