Chromeフルスクリーン操作

2466 ワード

web開発には、フルスクリーンのボタン、フルスクリーンのページ、またはフルスクリーンであるdivを表示する必要があります.Fulscreen APIはこの問題を解決できます.
フルスクリーンAPIは、Elementノード(およびサブノード)がユーザの画面全体を占めるようにブラウザのフルスクリーン表示を制御することができる.現在、各ブラウザの最新バージョンはこのAPI(IE 11を含む)をサポートしていますが、使用する場合はブラウザプレフィックスを追加する必要があります.
本論文ではchromeの使い方だけを紹介します.(他のブラウザはテストしていません.)
1.フルスクリーンweb全体
/**
 *     
 */
function fullScreen(){
  var elem = document.documentElement;
  if(!document.webkitIsFullScreen)
  {
    elem.webkitRequestFullscreen();
  }
  else
  {
    document.webkitExitFullscreen();
  }
}
2.フルスクリーンでdivなどの要素を表示する
/**
 *   div
 * @param elementid       ID
 */
function fullScreenEle(elementid){
  //  div
  var elem = document.getElementById(elementid);
  if(!document.webkitIsFullScreen)
  {
    elem.webkitRequestFullscreen();
  }
  else
  {
    document.webkitExitFullscreen();
  }
}
注意:elemはdomの対象です.
3.他のブラウザAPI
Standard
Blink(Chrome&Opera)
Gecko(Firefox)
インターネットExplorer 11
Edge
Safari(WebKit)
Dcument.fullscreen
webkitIs FllScreen
mozFulScreen
を選択します.
webkitIs FllScreen
webkitIs FllScreen
Dcument.fullscreenEnabled
webkit FulscreenEnabled
mozFulScrenEnabled
msFulscreenEnabled
webkit FulscreenEnabled
webkit FulscreenEnabled
Dcument.fullscreenElement
webkit FulscreenElement
mozFull SreenElement
msFulscreenElement
webkit FulscreenElement
webkit FulscreenElement
Dcument.onfullscreenchange
onwebkitfullscreenchange
onmozfullscreenchange
MSFulscreenChange
onwebkitfullscreenchange
onwebkitfullscreenchange
Dcument.onfullscreenerror
onwebkitfullscreenerror
onmozfullscreenerror
MSFulscreenErr
onwebkitfullscreenerror
onwebkitfullscreenerror
Dcument.exit Fulscreen()
webkitExit Fulscreen()
mozCancel FllScreen()
msExit Fulscreen()
webkitExit Fulscreen()
webkitExit Fulscreen()
Element.request Fulscreen()
webkit Request Fulscreen()
mozRequest FulScreen()
msRequest Fulscreen()
webkit Request Fulscreen()
webkit Request Fulscreen()
know more