zoukankan      html  css  js  c++  java
  • [JavaScript] 用html5 js实现浏览器全屏

    项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的

    效果。 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以

    页面中的图片,视频等全屏目前只有google chrome 15 +,safri5.1+,firfox10+,IE11支持

    全屏

    var docElm = document.documentElement;
    //W3C  
    if (docElm.requestFullscreen) {  
        docElm.requestFullscreen();  
    }
    //FireFox  
    else if (docElm.mozRequestFullScreen) {  
        docElm.mozRequestFullScreen();  
    }
    //Chrome等  
    else if (docElm.webkitRequestFullScreen) {  
        docElm.webkitRequestFullScreen();  
    }
    //IE11
    else if (elem.msRequestFullscreen) {
      elem.msRequestFullscreen();
    }
    

    退出全屏

    if (document.exitFullscreen) {  
        document.exitFullscreen();  
    }  
    else if (document.mozCancelFullScreen) {  
        document.mozCancelFullScreen();  
    }  
    else if (document.webkitCancelFullScreen) {  
        document.webkitCancelFullScreen();  
    }
    else if (document.msExitFullscreen) {
          document.msExitFullscreen();
    }
    

     事件监听

    document.addEventListener("fullscreenchange", function () {  
        fullscreenState.innerHTML = (document.fullscreen)? "" : "not ";}, false);  
       
    document.addEventListener("mozfullscreenchange", function () {  
        fullscreenState.innerHTML = (document.mozFullScreen)? "" : "not ";}, false);  
       
    document.addEventListener("webkitfullscreenchange", function () {  
        fullscreenState.innerHTML = (document.webkitIsFullScreen)? "" : "not ";}, false);
    document.addEventListener("msfullscreenchange", function () {
        fullscreenState.innerHTML = (document.msFullscreenElement)? "" : "not ";}, false);
    

     全屏样式设置

    在浏览器全屏的使用我们还可以进行样式设置

    html:-moz-full-screen {  
        background: red;  
    }  
       
    html:-webkit-full-screen {  
        background: red;  
    }  
       
    html:fullscreen {  
        background: red;  
    }
    

     附录

    1 一个在线的Demo

       
    http://robnyman.github.io/fullscreen/

    2   HTML5全屏API之网络钓鱼

         
    http://www.36ria.com/5807

    3   jquery封装的全屏插件

        
    http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/

    4  更加详细的全屏API介绍

        4.1
    https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode

        4.2 
    https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html

    5  HTML5全屏API在FireFox/Chrome中的显示差异

       http://www.zhangxinxu.com/wordpress/2012/10/html5-full-screen-api-firefox-chrome-difference/

  • 相关阅读:
    2019春第八周作业
    2019春第七周作业
    第六周作业
    币值转换
    打印沙漏
    秋季学期学习总结
    人生影响最大的三位老师
    自我介绍
    2018秋季学习总结
    自己
  • 原文地址:https://www.cnblogs.com/xupeiyu/p/3920023.html
Copyright © 2011-2022 走看看