javascript - IE10,11(edge) 使用 ele.msRequestFullScreen 方法无法进入全屏??
大家讲道理
大家讲道理 2017-04-11 13:07:18
0
0
1053

下面是我的进入全屏 和 退出全屏的方法。在 chrome || firefox 中都能够正确运行。但是 ie10 , 11(edge)却不起作用??ie怎么进入全屏??

/*
  * 全屏
*/
function fullScreen(ele){
  var fullScreenEnabled  = document.fullScreenEnabled || document.webkitFullScreenEnabled || document.mozFullScreenEnabled || document.msFullScreenEnabled;
  var isFullScreen         = document.fullScreenElement || document.webkitFullScreenElement || document.mozFullScreenElement || document.msFullScreenElement;
  if (fullScreenEnabled === undefined || fullScreenEnabled) {
     if (isFullScreen === undefined) {
        if (ele.requestFullScreen) {
           ele.requestFullScreen();
        } else if (ele.webkitRequestFullScreen) {
           ele.webkitRequestFullScreen();
        } else if (ele.mozRequestFullScreen) {
           ele.mozRequestFullScreen();
        } else if (ele.msRequestFullScreen) {
           ele.msRequestFullScreen();
        } else {
           console.log('不存在进入全屏的方法! => undefined');
        }
     } else if (isFullScreen === null) {
        if (ele.requestFullScreen) {
           ele.requestFullScreen();
        } else if (ele.webkitRequestFullScreen) {
           ele.webkitRequestFullScreen();
        } else if (ele.mozRequestFullScreen) {
           ele.mozRequestFullScreen();
        } else if (ele.msRequestFullScreen) {
           ele.msRequestFullScreen();
        } else {
           console.log('不存在进入全屏的方法! => null');
        }
     } else {
       console.log('元素已经是全屏状态了!');
       return true;
     }
  } else {
    console.log('不支持全屏模式!');
  }
}

/*
  * 退出全屏
*/
function exitFullScreen(){
  var fullScreenEnabled  = document.fullScreenEnabled || document.webkitFullScreenEnabled || document.mozFullScreenEnabled || document.msFullScreenEnabled;
  var isFullScreen         = document.fullScreenElement || document.webkitFullScreenElement || document.mozFullScreenElement || document.msFullScreenElement;
  if (fullScreenEnabled === undefined || fullScreenEnabled) {
     if (isFullScreen === undefined) {
        if (document.exitFullScreen) {
           document.exitFullScreen();
        } else if (document.webkitExitFullScreen) {
           document.webkitExitFullScreen();
        } else if (document.webkitCancelFullScreen) {
           document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
           document.mozCancelFullScreen();
        } else if (document.msExitFullScreen) {
           document.msExitFullScreen();
        } else if (document.msCancelFullScreen) {
           document.msCancelFullScreen();
        } else {
           console.log('不存在退出全屏的方法! => undefined');
        }
     } else if (isFullScreen !== null) {
        if (document.exitFullScreen) {
           document.exitFullScreen();
        } else if (document.webkitExitFullScreen) {
           document.webkitExitFullScreen();
        } else if (document.webkitCancelFullScreen) {
           document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
           document.mozCancelFullScreen();
        } else if (document.msExitFullScreen) {
           document.msExitFullScreen();
        } else if (document.msCancelFullScreen) {
           document.msCancelFullScreen();
        } else {
           console.log('不存在退出全屏的方法! => null');
        }
     } else {
       console.log('元素已经是非全屏状态了!');
       return true;
     }
  } else {
    console.log('不支持全屏模式!');
  }
}

该问题已解决:

IE 中:
进入全屏: ele.msRequestFullscreen() ===> 特别注意大小写!!他妈就是被这个搞死的!
退出全屏: ele.msExitRequestFullscreen()

以后更新版后,可以吧 ms 前缀去掉。
附上 参考文档:https://msdn.microsoft.com/en...

大家讲道理
大家讲道理

光阴似箭催人老,日月如移越少年。

Antworte allen(0)
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage