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 相关文章推荐
浅谈JavaScript字符集
May 22 Javascript
js简单倒计时实现代码
Apr 30 Javascript
ECMAScript6快速入手攻略
Jul 18 Javascript
jQuery新窗口打开外链接
Jul 21 Javascript
jQuery基于BootStrap样式实现无限极地区联动
Aug 26 Javascript
jQuery实现二维码扫描功能
Jan 09 Javascript
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
Sep 28 Javascript
详解angular部署到iis出现404解决方案
Aug 14 Javascript
js代码规范之Eslint安装与配置详解
Sep 08 Javascript
node.js基于socket.io快速实现一个实时通讯应用
Apr 23 Javascript
vue中axios防止多次触发终止多次请求的示例代码(防抖)
Feb 16 Javascript
ECharts transform数据转换和dataZoom在项目中使用
Dec 24 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
PHP 模拟登陆MSN并获得用户信息
2009/05/16 PHP
简单的php 验证图片生成函数
2009/05/21 PHP
php 字符过滤类,用于过滤各类用户输入的数据
2009/05/27 PHP
PHP 字符串分割和比较
2009/10/06 PHP
php curl 登录163邮箱并抓取邮箱好友列表的代码(经测试)
2011/04/07 PHP
php调用mysql存储过程实例分析
2014/12/29 PHP
php按字符无乱码截取中文的方法
2015/03/27 PHP
php解析字符串里所有URL地址的方法
2015/04/03 PHP
解决Laravel 不能创建 migration 的问题
2019/10/09 PHP
Aster vs KG BO3 第三场2.19
2021/03/10 DOTA
一个刚完成的layout(拖动流畅,不受iframe影响)
2007/08/17 Javascript
基于jQuery实现下拉收缩(展开与折叠)特效
2012/12/25 Javascript
Jquery倒数计时按钮setTimeout的实例代码
2013/07/04 Javascript
jquery中的常用事件bind、hover、toggle等示例介绍
2014/07/21 Javascript
Angular.JS去掉访问路径URL中的#号详解
2017/03/30 Javascript
JavaScript实现为事件句柄绑定监听函数的方法分析
2017/11/14 Javascript
谈谈JS中的!!
2017/12/07 Javascript
Vue filter格式化时间戳时间成标准日期格式的方法
2018/09/16 Javascript
JavaScript寄生组合式继承原理与用法分析
2019/01/11 Javascript
后台使用freeMarker和前端使用vue的方法及遇到的问题
2019/06/13 Javascript
element-ui中按需引入的实现
2019/12/25 Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
2020/02/21 Javascript
vue.js实现简单的计算器功能
2020/02/22 Javascript
python机器学习实战之树回归详解
2017/12/20 Python
Python3中函数参数传递方式实例详解
2019/05/05 Python
浅谈Pytorch中的torch.gather函数的含义
2019/08/18 Python
Python批量处理csv并保存过程解析
2020/05/16 Python
python 基于pygame实现俄罗斯方块
2021/03/02 Python
Camper鞋西班牙官方网上商店:西班牙马略卡岛的鞋类品牌
2019/03/14 全球购物
经理管理专业毕业自荐书范文
2014/02/12 职场文书
三年级评语大全
2014/04/23 职场文书
在校大学生自我评价范文
2014/09/12 职场文书
2014年机关工会工作总结
2014/12/19 职场文书
2015年大学辅导员工作总结
2015/05/12 职场文书
2016年第二十届“母亲节暨幸福工程救助贫困母亲活动日”活动总结
2016/04/06 职场文书
Go语言编译原理之变量捕获
2022/08/05 Golang