javascript full screen 全屏显示页面元素的方法


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 相关文章推荐
jquery 多级下拉菜单核心代码
May 21 Javascript
javascript中Date对象的getDay方法使用指南
Dec 22 Javascript
jquery图形密码实现方法
Mar 11 Javascript
js实现的黑背景灰色二级导航菜单效果代码
Aug 24 Javascript
JavaScript 经典实例日常收集整理(常用经典)
Mar 30 Javascript
浅析JS操作DOM的一些常用方法
May 13 Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
Jul 09 Javascript
深入理解jQuery()方法的构建原理
Dec 05 Javascript
Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
Jul 13 Javascript
详解无限滚动插件vue-infinite-scroll源码解析
May 12 Javascript
Vue的生命周期操作示例
Sep 17 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
Sep 02 Javascript
实现动画效果核心方式的js代码
Sep 27 #Javascript
javascript中call和apply方法浅谈
Sep 27 #Javascript
文本框回车提交与禁止提交示例
Sep 27 #Javascript
JQuery事件e参数的方法preventDefault()取消默认行为
Sep 26 #Javascript
原生js实现改变随意改变div属性style的名称和值的结果
Sep 26 #Javascript
js克隆对象、数组的常用方法介绍
Sep 26 #Javascript
js将当前时间格式转换成时间搓(自写)
Sep 26 #Javascript
You might like
sourcesafe管理phpproj文件的补充说明(downmoon)
2009/04/11 PHP
str_replace只替换一次字符串的方法
2013/04/09 PHP
php截取中文字符串不乱码的方法
2013/12/25 PHP
学习YUI.Ext 第七天--关于View&amp;JSONView
2007/03/10 Javascript
xml 封装与解析(javascript和C#中)
2009/07/26 Javascript
jQuery调用WebService的实现代码
2011/06/19 Javascript
javascript正则匹配汉字、数字、字母、下划线
2014/04/10 Javascript
node.js中的fs.unlinkSync方法使用说明
2014/12/15 Javascript
JavaScript+html5 canvas制作的百花齐放效果完整实例
2016/01/26 Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
2016/06/01 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
2016/12/08 Javascript
JavaScript中从setTimeout与setInterval到AJAX异步
2017/02/13 Javascript
jquery 仿锚点跳转到页面指定位置的实例
2017/02/14 Javascript
整理关于Bootstrap导航的慕课笔记
2017/03/29 Javascript
AngularJS+bootstrap实现动态选择商品功能示例
2017/05/17 Javascript
Node.js服务器开启Gzip压缩教程
2017/08/11 Javascript
5 种JavaScript编码规范
2018/01/30 Javascript
vue-cli实现多页面多路由的示例代码
2018/01/30 Javascript
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
2018/05/04 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
2019/05/10 Javascript
vue-router两种模式区别及使用注意事项详解
2019/08/01 Javascript
微信小程序 scroll-view的使用案例代码详解
2020/06/11 Javascript
javascript的hashCode函数实现代码小结
2020/08/11 Javascript
[01:12:08]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.24
2019/09/10 DOTA
python中文分词,使用结巴分词对python进行分词(实例讲解)
2017/11/14 Python
Python查找第n个子串的技巧分享
2018/06/27 Python
使用Python做定时任务及时了解互联网动态
2019/05/15 Python
Python将文字转成语音并读出来的实例详解
2019/07/15 Python
python 实现倒计时功能(gui界面)
2020/11/11 Python
Tom Dixon官网:英国照明及家具设计和制造公司
2019/03/01 全球购物
《世界多美呀》教学反思
2014/03/02 职场文书
学雷锋活动总结范文
2014/04/25 职场文书
综艺节目策划方案
2014/06/13 职场文书
教师个人考察材料
2014/12/16 职场文书
幼儿园教师自我评价
2015/03/04 职场文书
JavaWeb 入门篇:创建Web项目,Idea配置tomcat
2021/07/16 Java/Android