js 全屏事件 參考三

 

 

一、經過一些自測

chrome，html中的video元素點擊自帶的全屏按鈕，

觸發不了mdn所說的 fullscreenchange事件，准確來說是觸發了事件，但是類型字符串需要加上前綴 webkitfullscreenchange 

// 觸發不了  fullscreenchange 
document.getElementById('videoEle').onfullscreenchange = function ( event ) {
  console.log("FULL SCREEN CHANGE",event,document.fullscreenElement)
};

// 綁定 webkitfullscreenchange 可以觸發
使用 document 或者 document.getElementById('videoEle') 綁定都可以

document.getElementById('videoEle').addEventListener('webkitfullscreenchange', (event) => {

        if (document.fullscreenElement) {
           console.log(`進入全屏`);
        } else {
           console.log('離開全屏');
        }
  });

二、手動執行瀏覽器的全屏方法則video元素可以觸發 fullscreenchange事件

function btnClick(e){

     console.log('btnClick event is',event)
     let element = e.target
     element = document.getElementById('videoEle')
     //element = document.getElementById('test')  div元素或者button元素或其他html元素
    // element  = document.documentElement      document文檔元素
     if(element.requestFullscreen){
         element.requestFullscreen()
     }else if(element.mozRequestFullScreen){
         element.mozRequestFullScreen()
     }else if (element.msRequestFullscreen) {
        element.msRequestFullscreen()
     } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullScreen()

     }
}

順便補充一下，取消全屏的方法

// 退出 fullscreen
function exitFullscreen() {
if(document.exitFullscreen) {
document.exitFullscreen();
} else if(document.mozExitFullScreen) {
document.mozExitFullScreen();
} else if(document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}

 

三、觸發事件后判斷是否全屏，除了使用   document.fullscreenElement ，

        還可以使用    document.fullScreen 

 

$(document).bind('webkitfullscreenchange mozfullscreenchange fullscreenchange',function(e){
    console.log('全屏事件event is',e)

var isFullScreen = document.fullScreen || 
                   document.mozFullScreen || 
                   document.webkitIsFullScreen ||
                   document.fullscreenElement;
    if(isFullScreen){
      console.log('Go to Full Screen mode');
    }else{
       console.log('Exit Full Screen mode');
    }
});

 

四、

mdn參考鏈接：

 https://developer.mozilla.org/en-US/docs/Web/API/Document/fullscreenElement

博客參考鏈接 

fullscreenchange全屏事件監聽，兼容chrome、safari

https://blog.csdn.net/zqian1994/article/details/105814522 

 

Fullscreen API 全屏顯示網頁

https://blog.csdn.net/c14210220635c/article/details/71601243

 

 

  ['fullscreenchange','webkitfullscreenchange','mozfullscreenchange'].forEach((item,index) => {
          window.addEventListener(item, () => this.fullscreenchange());
        })
————————————————

    //  監聽全屏事件觸發
      fullscreenchange() {
        let isFullScreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
        if (isFullScreen) {
          //  進入全屏
        } else {
          //  退出全屏
          
        }
      },
————————————————
版權聲明：本文為CSDN博主「zqian1994」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/zqian1994/article/details/105814522

 

 

五、如某些博客的總結

https://www.cnblogs.com/lfqcode/p/6164001.html

Fullscreen 屬性與事件

一個壞消息,到目前為止,全屏事件和方法依然是帶前綴的,好消息就是很快主流瀏覽器就會都支持。

1.document.fullscreenElement:  當前處於全屏狀態的元素 element.
2.document.fullscreenEnabled:  標記 fullscreen 當前是否可用.

 

當進入/退出 全屏模式時,會觸發 fullscreenchange 事件:

 

var fullscreenElement =
document.fullscreenEnabled
|| document.mozFullscreenElement
|| document.webkitFullscreenElement;
var fullscreenEnabled =
document.fullscreenEnabled
|| document.mozFullscreenEnabled
|| document.webkitFullscreenEnabled;

 

Fullscreen CSS

瀏覽器提供了一些有用的 fullscreen CSS 控制規則:

 

 

/* html */
:-webkit-full-screen {
/* properties */
}
:-moz-fullscreen {
/* properties */
}


:fullscreen {
/* properties */
}


/* deeper elements */
:-webkit-full-screen video {
width: 100%;
height: 100%;
}


/* styling the backdrop */
::backdrop {
/* properties */
}