您的位置：首页 > Web前端 > JavaScript

javascript full screen 全屏显示 页面元素

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

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

document.onkeydown=function(event){
vare=event||window.event||arguments.callee.caller.arguments[0];
if(e&&e.keyCode==27){//ESC键

$('.navbar-inner').fadeIn(100);
varmaintable=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);

varmaintable=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的：

<!DOCTYPEhtml>
<html>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<body>

<buttonid="btn">fullscreen</button>

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

</body>

<scriptlanguage="JavaScript">
document.getElementById("btn").onclick=function(){
varelem=document.getElementById("content");
requestFullScreen(elem);
};

functionrequestFullScreen(element){

varrequestMethod=element.requestFullScreen||element.webkitRequestFullScreen||element.mozRequestFullScreen||element.msRequestFullScreen;

if(requestMethod){
requestMethod.call(element);
}elseif(typeofwindow.ActiveXObject!=="undefined"){
varwscript=newActiveXObject("WScript.Shell");
if(wscript!==null){
wscript.SendKeys("{F11}");
}
}
}

</script>
</html>


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

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

functioncancelFullScreen(el){
varrequestMethod=el.cancelFullScreen||el.webkitCancelFullScreen||el.mozCancelFullScreen||el.exitFullscreen;
if(requestMethod){//cancelfullscreen.
requestMethod.call(el);
}elseif(typeofwindow.ActiveXObject!=="undefined"){//OlderIE.
varwscript=newActiveXObject("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/
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航