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 相关文章推荐
js获取指定的cookie的具体实现
Feb 20 Javascript
Javascript实现鼠标右键特色菜单
Aug 04 Javascript
一款简单的jQuery图片标注效果附源码下载
Mar 22 Javascript
BootStrap点击下拉菜单项后显示一个新的输入框实现代码
May 16 Javascript
AngularJS基础 ng-focus 指令简单示例
Aug 01 Javascript
如何使用Vuex+Vue.js构建单页应用
Oct 27 Javascript
js实现定时进度条完成后切换图片
Jan 04 Javascript
详解JavaScript按概率随机生成事件
Aug 02 Javascript
vue.js element-ui tree树形控件改iview的方法
Mar 29 Javascript
jQuery+CSS实现的标签页效果示例【测试可用】
Aug 14 jQuery
浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
Dec 20 Javascript
让Vue响应Map或Set的变化操作
Nov 11 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编码规范-php coding standard
2007/03/16 PHP
php入门教程 精简版
2009/12/13 PHP
PHP实现的mysql读写分离操作示例
2018/05/22 PHP
php往mysql中批量插入数据实例教程
2018/12/12 PHP
JavaScript页面刷新与弹出窗口问题的解决方法
2010/03/02 Javascript
Chrome中JSON.parse的特殊实现
2011/01/12 Javascript
javascript重写alert方法的实例代码
2013/03/29 Javascript
jQuery实现可用于博客的动态滑动菜单
2015/03/09 Javascript
浅析Bootstrip的select控件绑定数据的问题
2016/05/10 Javascript
jQuery插件formValidator实现表单验证
2016/05/23 Javascript
jQuery简单实现iframe的高度根据页面内容自适应的方法
2016/08/01 Javascript
使用伪命名空间封装保护独自创建的对象方法
2016/08/04 Javascript
AngularJS 所有版本下载地址
2016/09/14 Javascript
Bootstrap表单控件使用方法详解
2017/01/11 Javascript
AngularJS实现路由实例
2017/02/12 Javascript
canvas 实现中国象棋
2017/02/17 Javascript
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
2017/05/05 jQuery
js使用highlight.js高亮你的代码
2017/08/18 Javascript
JS一个简单的注册页面实例
2017/09/05 Javascript
ES7中利用Await减少回调嵌套的方法详解
2017/11/01 Javascript
AngularJS实现的2048小游戏功能【附源码下载】
2018/01/03 Javascript
js实现经典贪吃蛇小游戏
2020/03/19 Javascript
[03:44]2015国际邀请赛选手档案—Cloud9.NoTail
2015/07/28 DOTA
详解Python中的元组与逻辑运算符
2015/10/13 Python
Python SQLAlchemy库的使用方法
2020/10/13 Python
利用Python发送邮件或发带附件的邮件
2020/11/12 Python
HTML5 Canvas绘制文本及图片的基础教程
2016/03/14 HTML / CSS
五个2015 年最佳HTML5 框架
2015/11/11 HTML / CSS
娇韵诗俄罗斯官方网站:Clarins俄罗斯
2020/10/03 全球购物
平面设计师的工作职责
2013/11/21 职场文书
2015年六一儿童节演讲稿
2015/03/19 职场文书
员工手册董事长致辞
2015/07/29 职场文书
国家助学金受助感言
2015/08/01 职场文书
Goland使用Go Modules创建/管理项目的操作
2021/05/06 Golang
pytorch finetuning 自己的图片进行训练操作
2021/06/05 Python
详解NodeJS模块化
2021/06/15 NodeJs