当前位置： 移动技术网 > IT编程>网页制作>CSS > 如何优雅的全屏

如何优雅的全屏

2019年04月19日  | 移动技术网IT编程  | 我要评论

因为工作需要，我们的直播平台需要全屏模式，这个全屏不是video的全屏，是自己定制的全屏。
那么这里就遇到了一系列的问题，因为f11 和esc都可以取消全屏，而f11还可以进入全屏。
但是此全屏和我们需要的全屏还不是同一种。
反正很麻烦。

下面上代码，重点是实现的思路，而并不是代码，后面会讲思路

全屏检测函数，是否支持全屏

export function isfullscreen() {
  let isfull =
    document.fullscreenenabled ||
    window.fullscreen ||
    document.webkitisfullscreen ||
    document.msfullscreenenabled;

  //to fix : false || undefined == undefined
  if (isfull === undefined) isfull = false;
  return isfull;
}

开启和取消全屏

/*全屏*/
export function enterfullscreen() {
  let docelm = document.documentelement;

  //w3c
  if (docelm.requestfullscreen) {
    docelm.requestfullscreen();
  }
  //firefox
  else if (docelm.mozrequestfullscreen) {
    docelm.mozrequestfullscreen();
  }
  //chrome等
  else if (docelm.webkitrequestfullscreen) {
    docelm.webkitrequestfullscreen();
  }
}

/*取消全屏*/
export function exitfullscreen() {
  if (document.exitfullscreen) {
    document.exitfullscreen();
  } else if (document.mozcancelfullscreen) {
    document.mozcancelfullscreen();
  } else if (document.webkitcancelfullscreen) {
    document.webkitcancelfullscreen();
  } else if (document.msexitfullscreen) {
    document.msexitfullscreen();
  }
}

下面，重点来了，我们最好不要在全屏函数中写 全屏样式切换的代码，

这会带来一些错乱的问题，而且，用户会看到页面元素乱一下，然后又重新布局好，这种体验很差。

所以，我们在监听回调函数中写我们的全屏、分屏样式切换代码

 addscreenchangelistener(){
    document.addeventlistener("fullscreenchange", ()=> {
       //在这里写分屏、全屏切换代码
    }, false);
  
    document.addeventlistener("mozfullscreenchange",  ()=> {
        //在这里写分屏、全屏切换代码
    }, false);
  
    document.addeventlistener("webkitfullscreenchange", ()=>  {
       //在这里写分屏、全屏切换代码
    }, false);
  }

ok，当然，其中还有些技巧，是因为我是用的react，异步刷新的问题，

这里就不赘述了，如果有人遇到同样的问题，欢迎交流。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网