html5 js を使用して、ボタンをクリックして全画面ブラウザ効果を実現する_javascript スキル

プロジェクトでは、背景のブラウザ ウィンドウを全画面にする必要があります。つまり、ボタンをクリックして F11 キーを押したときの全画面効果を実現します。 HTML5 では、W3C が全画面効果を実現し、ページ上の写真やビデオなどを全画面表示できるフルスクリーン API を開発しました。現在、Google Chrome 15、safri5.1、filfox10、のみです。および IE11 のサポート

全画面

var docElm = document.documentElement;

//W3C 

if (docElm.requestFullscreen) { 

  docElm.requestFullscreen(); 

}

//FireFox 

else if (docElm.mozRequestFullScreen) { 

  docElm.mozRequestFullScreen(); 

}

//Chrome等 

else if (docElm.webkitRequestFullScreen) { 

  docElm.webkitRequestFullScreen(); 

}

//IE11

else 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

3 jquery によってカプセル化された全画面プラグイン

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-firefox-chrome-difference/