javascript full screen 全屏显示 页面元素

要想让页面的某个元素全屏显示，就像在网页上看视频的时候，可以全屏观看一样，该怎么实现呢？

一种最简单的方式，就是动态改变你想要全屏显示的部件的style，例如position变成absolute，height和width都设置成窗口大小，并且把背景颜色改成全白（为了遮住页面上其余的元素）。这样网页上就只能看到你要突出的部件了，视觉上就等同于全屏。同时利用javascript监听键盘事件，一旦用户按了ESc退出键，就恢复原来的样子。部分代码如下：

document.onkeydown = function (event) {
        var e = event || window.event || arguments.callee.caller.arguments[0];
        if (e && e.keyCode == 27) { //ESC键
            
            $('.navbar-inner').fadeIn(100);
            var maintable = document.getElementById("holder");
            maintable.style.position = "relative";
            maintable.style.height = "100%";
            maintable.style.width = "100%";
            maintable = document.getElementById("main");
            maintable.style.height = "100%";
            maintable.style.width = "100%";
            maintable.style.left = 0 + "px";
            maintable.style.top = 0 + "px";
            resizePlots();
        }        
    };

fullScreenClick: function () {

$('.navbar-inner').fadeOut(100);

var maintable = document.getElementById("holder");
maintable.style.position = "absolute";
maintable.style.background = "#fff";
//maintable.style.zIndex = 5;
maintable.style.height = $(window).height() + "px";
maintable.style.width = $(window).width() + "px";
maintable.style.left = 0 + "px";
maintable.style.top = 0 + "px";



 maintable = document.getElementById("main");
                maintable.style.height = "90%";
                maintable.style.width = "90%";
                maintable.style.left = $(window).width() * 0.05 + "px";
                maintable.style.top = $(window).height() * 0.02 + "px";
                resizePlots();
        },


 




但是这样做有个缺点，就是还需要手工按一下F11来达到真正的全屏。


下面有一种方法不用自己按F11的：




<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<body  >

<button id="btn" > full screen </button>

<div id="content" style="height:500px;width:500px;background:#fff">
<h1>欢迎微博互粉！</h1>
<h2>weibo.com/leavingseason</h2>
<p>相信音乐，相信五月天</p>
</div>
 
</body>

 <script language="JavaScript">  
document.getElementById("btn").onclick=function(){ 
 var elem = document.getElementById("content");  
requestFullScreen(elem); 
}; 

function requestFullScreen(element) {
     
    var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;

    if (requestMethod) {  
        requestMethod.call(element);
    } else if (typeof window.ActiveXObject !== "undefined") {  
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript !== null) {
            wscript.SendKeys("{F11}");
        }
    }
} 

</script> 
</html>




这个可以支持大部分的浏览器。但是讨厌的IE还是不能支持HTML5的全屏功能，需要模拟按F11这个动作。读者可以在代码中看到。


还可以在代码里面退出全屏界面：




 function cancelFullScreen(el) {
            var requestMethod = el.cancelFullScreen||el.webkitCancelFullScreen||el.mozCancelFullScreen||el.exitFullscreen;
            if (requestMethod) { // cancel full screen.
                requestMethod.call(el);
            } else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
                var wscript = new ActiveXObject("WScript.Shell");
                if (wscript !== null) {
                    wscript.SendKeys("{F11}");
                }
            }
        }




关于全屏显示，我还是很好奇，那么视频网站是如何做到对IE等浏览器都兼容的全屏功能的。如果有谁知道的话，还请分享一下，感激不尽。


 updated (2013/09/22)


很多时候，想在全屏切换的时候做一些自定义的事情。可以如下绑定事件：




document.addEventListener("fullscreenchange", function () {
    doit();
}, false);
 
document.addEventListener("mozfullscreenchange", function () {
    doit();
}, false);
 
document.addEventListener("webkitfullscreenchange", function () {
    doit();
}, false);




它会在每次进入或者退出全屏的时候，触发doit（）操作。


另外，有篇博客写的很不错：http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/


 


 






        

        

            posted on 
2013-09-18 22:09 
leavingseason 
阅读(7515) 
评论(6) 
编辑 
收藏 
举报

        

    










    
    

    
    

    

        

    

        

            
                
                
            
        

    

        

            
                
            
        

    

    

    





            

        

        

            

导航




            
            

            

            
        

    

    

    





    

        
  Bye!