Posted in Javascript onSeptember 27, 2013
一种最简单的方式,就是动态改变你想要全屏显示的部件的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()操作。
javascript full screen 全屏显示页面元素的方法
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@