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 相关文章推荐
ImageFlow可鼠标控制图片滚动
Jan 30 Javascript
JS中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
Nov 03 Javascript
jQuery.Validate验证库的使用介绍
Apr 26 Javascript
跟我学习javascript的执行上下文
Nov 18 Javascript
jQuery实现网页顶部固定导航效果代码
Dec 24 Javascript
jQuery中常用动画效果函数(日常整理)
Sep 17 Javascript
JS计算距当前时间的时间差实例
Dec 29 Javascript
vue组件实现弹出框点击显示隐藏效果
Oct 26 Javascript
Vue不能观察到数组length的变化
Jun 08 Javascript
微信小程序实现折叠与展开文章功能
Jun 12 Javascript
vue+springboot实现项目的CORS跨域请求
Sep 05 Javascript
antd design table更改某行数据的样式操作
Oct 31 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
2020年4月新番动漫目录 官方宣布4月播出的作品一览
2020/03/08 日漫
ueditor 1.2.6 使用方法说明
2013/07/24 PHP
PHPExcel内存泄漏问题解决方法
2015/01/23 PHP
PHP编程实现阳历转换为阴历的方法实例
2017/08/08 PHP
Laravel利用gulp如何构建前端资源详解
2018/06/03 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
PHP get_html_translation_table()函数用法讲解
2019/02/16 PHP
基于jQuery的可用于选项卡及幻灯的切换插件
2011/03/28 Javascript
asp.net+js实现金额格式化
2015/02/27 Javascript
javascript实时显示北京时间的方法
2015/03/12 Javascript
jquery实现清新实用的网页菜单效果
2015/08/28 Javascript
js实现人民币大写金额形式转换
2016/04/27 Javascript
node+express制作爬虫教程
2016/11/11 Javascript
js实现返回顶部效果
2017/03/10 Javascript
Linux CentOS系统下安装node.js与express的方法
2017/04/01 Javascript
nodejs利用ajax实现网页无刷新上传图片实例代码
2017/06/06 NodeJs
基于js中的存储键值对以及注意事项介绍
2018/03/30 Javascript
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
2020/07/09 Javascript
[07:47]DOTA2国际邀请赛采访专栏:探访Valve总部
2013/08/08 DOTA
[53:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma BO3 第一场 1月31日
2021/03/11 DOTA
python聊天程序实例代码分享
2013/11/18 Python
用smtplib和email封装python发送邮件模块类分享
2014/02/17 Python
python实现simhash算法实例
2014/04/25 Python
一步步教你用Python实现2048小游戏
2017/01/19 Python
基于Linux系统中python matplotlib画图的中文显示问题的解决方法
2017/06/15 Python
Python实现字符串逆序输出功能示例
2017/06/24 Python
PyCharm在win10的64位系统安装实例
2017/11/26 Python
Python开启线程,在函数中开线程的实例
2019/02/22 Python
python Pillow图像处理方法汇总
2019/10/16 Python
快速查找Python安装路径方法
2020/02/06 Python
python各种excel写入方式的速度对比
2020/11/10 Python
详解px单位html5响应式方案
2018/03/08 HTML / CSS
英国索普公园票务和酒店套餐:Thorpe Breaks
2019/09/14 全球购物
加拿大在线隐形眼镜和眼镜店:VisionPros
2019/10/06 全球购物
建设幸福中国演讲稿
2014/09/11 职场文书
五年级小学生评语
2014/12/26 职场文书