HTML5 中网络监听接口和全屏接口的使用

一、网络监听接口

1.ononline:网络连通时触发

  window.addEventListener('online', function () {
    alert('网络连通了')
  })

2.onoffline:网络断开时触发

  window.addEventListener('offline', function () {
    alert('网络断开了')
  })

二、全屏接口的使用

1.开启全屏显示：requestFullscreen()

不同浏览器需要不能的前缀
chrome:webkit  firefox:moz   ie:ms   opera:o
使用能力测试添加不同浏览器下的前缀达到所有浏览器都能正常使用

2.退出全屏：cancelFullscreen()

也需要添加前缀，并且退出全屏只能使用document来实现

3.判断是否是全屏状态：fullscreenElement()

也需要添加前缀，并且退出全屏只能使用document来实现

案例：

<div class="container">
  <img src="./imgs/u=126814066,3359646815&fm=111&gp=0.jpg" alt="">
  <button>全屏</button>
  <button>判断是否全屏</button>
</div>

    let button = document.querySelectorAll('button')
    let img = document.querySelector('img')
    // 点击按钮全屏显示图片
    button[0].onclick = function () {
      console.log('全屏')
      if (img.requestFullScreen) {
        img.requestFullScreen()
      } else if (img.webkitRequestFullScreen) {
        img.webkitRequestFullScreen()
      } else if (img.mozRequestFullScreen) {
        img.mozRequestFullScreen()
      } else if (img.msRequestFullScreen) {
        img.msRequestFullScreen()
      } else if (img.oRequestFullScreen) {
        img.oRequestFullScreen()
      }
    }
    // 点击图片退出全屏显示
    img.onclick = function () {
      console.log('退出全屏')
      // 退出全屏只能使用document来实现
      if (document.cancelFullScreen) {
        document.cancelFullScreen()
      } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen()
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen()
      } else if (document.msCancelFullScreen) {
        document.msCancelFullScreen()
      } else if (document.oCancelFullScreen) {
        document.oCancelFullScreen()
      }
    }
    // 点击按钮判断图片是否全屏显示
    button[1].onclick = function () {
      console.log('判断是否全屏')
      // 使用document进行判断
      if (document.fullscreenElement || document.mozFullscreenElement || document.msFullscreenElement || document
        .oFullscreenElement || document.webkitFullscreenElement) {
        console.log('是')
      } else {
        console.log('否')
      }
    }