全屏api不能用于IE

问题描述:

我想在全屏幕API中使用全屏幕API在全屏幕中显示内容一切正常,除了下面的IE代码是代码,任何帮助将是伟大的,感谢您提前。全屏api不能用于IE

JavaScript代码:

(function() { 
    var 
     fullScreenApi = { 
      supportsFullScreen: false, 
      isFullScreen: function() { return false; }, 
      requestFullScreen: function() {}, 
      cancelFullScreen: function() {}, 
      fullScreenEventName: '', 
      prefix: '' 
     }, 
     browserPrefixes = 'webkit moz o ms khtml'.split(' '); 

    // check for native support 
    if (typeof document.cancelFullScreen != 'undefined') { 
     fullScreenApi.supportsFullScreen = true; 
    } else {  
     // check for fullscreen support by vendor prefix 
     for (var i = 0, il = browserPrefixes.length; i < il; i++) { 
      fullScreenApi.prefix = browserPrefixes[i]; 

      if (typeof document[fullScreenApi.prefix + 'CancelFullScreen' ] != 'undefined') { 
       fullScreenApi.supportsFullScreen = true; 

       break; 
      } 
     } 
    } 

    // update methods to do something useful 
    if (fullScreenApi.supportsFullScreen) { 
     fullScreenApi.fullScreenEventName = fullScreenApi.prefix + 'fullscreenchange'; 

     fullScreenApi.isFullScreen = function() { 
      switch (this.prefix) { 
       case '': 
        return document.fullScreen; 
       case 'webkit': 
        return document.webkitIsFullScreen; 

       default: 
        return document[this.prefix + 'FullScreen']; 
      } 
     } 
     fullScreenApi.requestFullScreen = function(el) { 
      return (this.prefix === '') ? el.requestFullScreen() : el[this.prefix + 'RequestFullScreen'](); 
     } 
     fullScreenApi.cancelFullScreen = function(el) { 
      return (this.prefix === '') ? document.cancelFullScreen() : document[this.prefix + 'CancelFullScreen'](); 
     }  
    } 

    // jQuery plugin 
    if (typeof jQuery != 'undefined') { 
     jQuery.fn.requestFullScreen = function() { 

      return this.each(function() { 
       var el = jQuery(this); 
       if (fullScreenApi.supportsFullScreen) { 
        fullScreenApi.requestFullScreen(el); 
       } 
      }); 
     }; 
    } 

    // export api 
    window.fullScreenApi = fullScreenApi; 
})(); 

</script> 

<script> 


var fsButton = document.getElementById('fsbutton'); 
var fsElement = document.getElementById('container'); 




if (window.fullScreenApi.supportsFullScreen) { 

// handle button click 
fsButton.addEventListener('click', function() { 
    //alert(fsElement); 
    window.fullScreenApi.requestFullScreen(fsElement); 
    //alert("hi"); 
}, true); 

fsElement.addEventListener(fullScreenApi.fullScreenEventName, function()  { 
    if (fullScreenApi.isFullScreen()) { 
     alert("yes"); 
     //fsStatus.innerHTML = 'Whoa, you went fullscreen'; 
    } else { 
     alert("no"); 
    // fsStatus.innerHTML = 'Back to normal'; 
    } 
}, true); 

} else { 
alert("no"); 
// fsStatus.innerHTML = 'SORRY: Your browser does not support FullScreen'; 
} 

</script> 

HTML代码:

<div> 
    <div id="container" > 
    ..... content goes here 
    </div> 
    <input type="button" id="fsbutton" title="View Full Screen"> 
</div> 
+0

在IE控制台中出现错误吗? –

+0

哪条线路故障?什么是错误? –

+0

它说什么都没有,没有错误信息 – 3bu1

我没有尝试,但我认为这是因为IE doesn't use the camelCase"cancelFullscreen""Fullscreen""requestFullscreen",这是实际的live standard recommandation顺便说一句。

这次其他浏览器是错误的。

+0

这里是全屏的链接https://msdn.microsoft.com/en-us/library/dn265028(v=vs.85).aspx但我没有得到它。请任何帮助。 – 3bu1

+0

当你的代码查找Element.requestFullScreen()时,语法是'Element.requestFullscreen();'注意Full ** S ** creen – Kaiido

+0

中的'S',但这只适用于IE11..that坏消息..!! – 3bu1