プロジェクトでは、バックグラウンドブラウザウィンドウを完全にスクリーニングする必要があります。つまり、ボタンをクリックして、F11フル画面を押す効果を実現します。 HTML5では、W3CはフルスクリーンAPIを定式化し、フルスクリーン効果を実現でき、ページ上のフルスクリーン画像、ビデオなどを許可することもできます。
全画面表示
var docelm = document.documentelement; // w3c if(docelm.requestfullscreen){docelm.requestfullscreen(); } // firefox else if(docelm.mozrequestfullscreen){docelm.mozrequestfullscreen(); } // ie11else if(elem.msrequestfullscreen){{elem.msrequestfullscreen();}フル画面を終了します
if(document.exitfullscreen){document.exitfullscreen(); } else if(document.mozcancelfullscreen){document.mozcancelfullscreen(); } else if(document.webkitcancelfullscreen){document.webkitcancelfullscreen(); } else if(document.msexitfullscreen){document.msexitfullscreen(); }イベントリスニング
document.addeventListener( "fullscreenchange"、function(){fullscreenstate.innerhtml =(document.fullscreen)? "": "not";}、false); document.addeventlistener( "mozfullscreenchange"、function(){fullscreenstate.innerhtml =(document.mozfullscreen)? "": "not";}、false); document.addeventListener( "webkitfullscreenchange"、function(){fullscreenstate.innerhtml =(document.webkitisfullscreen)? "": "not";}、false); document.addeventlistener( "msfullscreenchange"、function(){fullscreenstate.innerhtml =(document.msfullscreenelement)? "": "not";}、false);フルスクリーンスタイルの設定
フルスクリーンブラウザを使用してスタイルを設定することもできます
html:-moz-full-screen {background:red; } html:-webkit-full-screen {background:red; } html:fullscreen {background:red; }付録
1オンラインデモ
http://robnyman.github.io/fullscreen/
フィッシング用の2 HTML5フルスクリーンAPI
http://www.36ria.com/5807
jQueryによってカプセル化された3フルスクリーンプラグイン
http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/
4詳細なフルスクリーンAPIはじめに
4.1 https://developer.mozilla.org/en-us/docs/web/guide/api/dom/using_full_screen_mode
4.2 https://dvcs.w3.org/hg/fullscreen/raw-file/tip/overview.html
5 Firefox/ChromeのHTML5フルスクリーンAPIの違いを表示
http://www.zhangxinxu.com/wordpress/2012/10/html5-full-screen-api-fox-chrome-difference/