只此一招，全屏操作從此易如反掌

前端開膛手發表於2018-09-04

哈哈，大家原諒我這標題太唬人了……

不過真的很有效哎。

以前對付全屏需求，我的做法是重新寫一套css，觸發事件之後給頂層節點加上class。這樣的做法麻煩，不夠美觀，容易出錯。

最近才知道有一種更方便、快捷、優雅、安全的做法。

原來H5自帶全屏api啊！

只此一招，全屏操作從此易如反掌

而且全屏效果很酷炫有木有！

廢話不多少，直接上程式碼吧。

//切換全屏效果export function toggleFullScreen(videoElement) {  if (    !document.mozFullScreenElement &&    !document.webkitFullscreenElement &&    !document.fullscreenElement &&    !document.FullscreenElement  ) {    if (videoElement.mozRequestFullScreen) {      videoElement.mozRequestFullScreen();    } else if (videoElement.webkitRequestFullScreen) {      videoElement.webkitRequestFullScreen();    } else if (videoElement.requestFullscreen) {      videoElement.requestFullscreen();    } else if (videoElement.msRequestFullscreen) {      videoElement.msRequestFullscreen();    }  } else {    if (document.mozCancelFullScreen) {      document.mozCancelFullScreen();    } else if (document.webkitCancelFullScreen) {      document.webkitCancelFullScreen();    } else if (document.fullscreen) {      document.exitFullscreen();    } else {      document.msExitFullscreen();    }  }}//驗證是否全屏
export function checkFull() {  if (    !document.mozFullScreenElement &&    !document.webkitFullscreenElement &&    !document.fullscreenElement &&    !document.FullscreenElement  ) {    return false;  } else {    return true;  }}//監聽全屏事件
    this.$parent.$el.addEventListener("fullscreenchange", function() {      if (checkFull()) {        self.isFullScreen = true;      } else {        self.isFullScreen = false;      }    });    this.$parent.$el.addEventListener("webkitfullscreenchange", function() {      if (checkFull()) {        self.isFullScreen = true;      } else {        self.isFullScreen = false;      }    });
    this.$parent.$el.addEventListener("mozfullscreenchange", function() {      if (checkFull()) {        self.isFullScreen = true;      } else {        self.isFullScreen = false;      }    });
    this.$parent.$el.addEventListener("MSFullscreenChange", function() {      if (checkFull()) {        self.isFullScreen = true;      } else {        self.isFullScreen = false;      }    });
複製程式碼

有兩個需要注意的地方：

1，不同瀏覽器的相容寫法。

2，元素全屏後，某些功能可能會失效，比如modal，如果是寫在元素之外的，那麼不會出現，需要將之寫在元素內部。


相關文章