javascript full screen 全屏显示页面元素的方法_javascript技巧
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的:
欢迎微博互粉!
weibo.com/leavingseason
相信音乐,相信五月天
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}");
}
}
}
这个可以支持大部分的浏览器。但是讨厌的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显示表单内元素数量的方法_javascript技巧
-
js控制页面控件隐藏显示的两种方法介绍_javascript技巧
-
js控制页面的全屏展示和退出全屏显示的方法_javascript技巧
-
js控制页面控件隐藏显示的两种方法介绍_javascript技巧
-
JS显示下拉列表框内全部元素的方法_javascript技巧
-
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法_javascript技巧
-
JavaScript显示表单内元素数量的方法_javascript技巧
-
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法_javascript技巧
-
js自动生成的元素与页面原有元素发生堆叠的解决方法_javascript技巧
-
js 获取元素在页面上的偏移量的方法汇总_javascript技巧