第五篇 html5 - 新特性【 网络监听接口 + 全屏接口 】

html5 新增 网络监听接口

1、online

2、offline

online

网络联通的时候触发这个事件

window.addEventListener("online", function () {
	console.log( "连接上网络了！" )
})

offline

网络断开的手触发这个事件

window.addEventListener("offline", function () {
	console.log( "网络断开了！" )
})

html5 新增 浏览器全屏接口

1、requestFullScreen(): 开启全屏显示

2、cancelFullScreen():  退出全屏显示，在不同的浏览器下面只能使用 document 来实现，因为是整个 document 退出全屏

3、fullScreenElement: 是否是全屏状态

4、兼容前缀：chorme(webkit)、firefox(moz)、IE(ms)、opera(o)

全屏状态 方法封装

function toFullVideo(obj) {
  if (obj.requestFullscreen) {
    return obj.requestFullScreen();
  } else if (obj.webkitRequestFullScreen) {
    return obj.webkitRequestFullScreen();
  } else if (obj.mozRequestFullScreen) {
    return obj.mozRequestFullScreen();
  } else {
    return obj.msRequestFullscreen()
  }
}

退出全屏 方法封装

function exitFullscreen() {
   if (document.exitFullscreen) {
      document.exitFullscreen();
   } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
   } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
   } else if(document.oRequestFullscreen){
      document.oCancelFullScreen();
   }else {
      document.webkitExitFullscreen();
   }
  }

也可以直接按 ESC 键退出全屏

是否全屏 方法封装

function isFullScreen() {
 return (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullscreenElement || document.oFullscreenElement || document.msFullscreenElement) ? true : false
}