让你的页面瞬间全屏_weixin_34010949的博客-程序员宝宝

技术标签: ViewUI  游戏  javascript  

@update 文章下方有更新,提到了更多全屏的知识以及错误的矫正。

页面全屏是一个体验非常棒的功能,他可以让你的视觉焦点聚集在你想关注的元素块上。很多浏览器都支持全屏,按下 F11,哦了! 页面全屏了~ 但是本文要说的并不是这种全屏。当页面中有个小 DEMO 或者小游戏要展示的时候,用户期望,这个 DEMO 或者游戏可以在全屏下展示,本文就教你如何来展示。

如果你是非 IE 浏览器进入的该页面,你可能已经看到了页面上发生了一点小变化,多个东西:

没错,多了个“进入全屏”的按钮,这就是本文要介绍的内容!

本文地址:http://www.cnblogs.com/hustskyking/p/javascript-fullscreen.html,转载请注明源地址。

一、全屏策略

1. 原理

一些浏览器提供了元素全屏的接口,这些接口的调用特别简单:

// 进入全屏
element.requestFullScreen(); 
// 退出全屏
document.exitFullscreen(); 

这是 w3c 规范统一的接口,但是浏览器总是那么调皮,内部实现的时候会加上自己厂商的前缀,如:

// 小狐
element.mozRequestFullScreen();  
// Chrome
document.webkitCancelFullScreen();

这里有两点需要引起注意,W3C 中的退出全屏是 exitFullscreen,而小狐跟 Chrome 使用的是 cancelFullScreen,这里在作判断的时候不要弄错了;再一点就是当我们退出全屏的时候,并不是使用 element 作为退出的对象了,而是使用 document。

2. 兼容处理

原理是很简单,但是针对浏览器的兼容性写起来还是挺麻烦的,幸好 Chrome 换用 blink内核 之后没有继续加上一个 -blink-,否则开发者心里会有无数个草泥马奔腾的!

对于进入全屏:

function launchFullScreen(element) {  
   if (element.requestFullscreen) {
      element.requestFullscreen();
    } else if (element.msRequestFullscreen) {
      element.msRequestFullscreen();
    } else if (element.mozRequestFullScreen) {
      element.mozRequestFullScreen();
    } else if (element.webkitRequestFullscreen) {
      element.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    }
}

对于退出全屏:

function cancelFullScreen() {  
   if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }
}  

3. 浏览器兼容性

IE 用户就甭看了,刚测试,IE11 不兼容(需要加前缀 ms)。对于浏览器的兼容情况,请戳这里。目前 Firefox 兼容,不过有点离谱。他会弹出一个让你全屏的提示,此时确实是全屏的,但当你点击提示中的“允许”时,屏幕又退出了全屏,真是让人匪夷所思。我测试的版本(27.0.1)有这个问题,当然,这是浏览器本身的问题,不用纠结。

Chrome 对于新特性的支持永远是站在前排,不得不佩服 google 开发工程师的牛掰!

二、3 个 bug

1. window 失去焦点

当全屏一个元素块的时候,原始状态该元素块可能没有 padding 或者 margin 值,为了让他显示的稍微养眼一些,我们可能会给他主动加上 padding 值,然后在退出全屏的时候在拿到设置的值。但此时,一个 bug 出现鸟,当我们点击全屏页面中的 a 标签,或者触发了某个 window.open 之后,浏览器会失去焦点,跳到新开的页面中,而全屏的页面会退出全屏,搞笑的是我们开始设置的 padding 值他不给我们去掉,这个是令人十分神伤的,不过没关系,有 bug 咱们就打补丁!

window.onblur = function(){
    cancelFullsreen();
    changeThePadding();
};

有人会想到,我们在点击 a 链接的时候先 changeThePadding(),再让 a 标签跳走,这种方式是不合理的,因为除了 a 链接会让页面失去焦点之外还有其他的可能(如 window.open)。

@update 因为 bug 3 的存在,这里不能这样改,需要利用浏览器的全屏探测:

$(document).on('webkitfullscreenchange mozfullscreenchange msfullscreenchange fullscreenchange', function(){
    if (!document.fullscreenElement &&    // alternative standard method
    !document.mozFullScreenElement && 
    !document.webkitFullscreenElement && 
    !document.msFullscreenElement ) {
        // 在这里处理 bug
changeThePadding();
} });

2. 一个貌似可以重现的 bug

所谓的可以重现就是,把代码逻辑抽离出来,写个 demo 还能看到 bug。反正我试过好几次,这个 bug 都出现了,懒得写一个 DEMO 重现他。他出现的位置是:我的滚动条是自己设置的样式,当全屏之后,滚动条本应该在页面的最右侧,但是我测试的时候他偶尔会离最右侧有十几个像素,我也不知道为什么。但是当我打开 DevTools 的时候,这十几个像素又奇妙的被缝合了~

后来一想,管你呢,这肯定是 google 的工程师没有留意到的位置!既然开打 DevTools 可以修复,那就说明触发 window.resize 也能解决这个问题,好吧,那就这样试试吧:

newCancelFullscreen = function(){
    cancelFullscreen();
    window.onresize();
};

果然有效,bug 搞定!

3. 全屏之后,部分浏览器会在该页面失去焦点

这就相当于,全屏之后,触发了 window.blur();

三、小结

除了上面提到的两个 bug,还有一个值得注意的是,如果你全屏的那个元素块很高但却没有设置

element {
     overflow:auto; }

之类的东西,你会发现滚烂你的鼠标也滚不出那块区域。

本文介绍了如何使用 javascript 将页面中的某个元素调至全屏,并指出了再使用过程中的两个 bug,希望引起注意!

四、参考资料

 

@update 2014/03/01 12:00

1. Trident 内核的 IE 浏览器是支持的,可以用 element.msRequestFullscreen(),退出用 msExitFullscreen()

2. 对于全屏的元素可以使用伪元素给他加样式:

:-webkit-full-screen #myvideo {
    
  width: 100%;
  height: 100%;
}

3. 浏览器提供的两个方便开发的东西:

fullscreenElement:如果这个属性为空,则浏览器处于非全屏状态,否则就是处于全屏。

fullscreenEnabled:这个属性告诉你浏览器 document 是否可以全屏。

4. 也可以使用 keydown 来控制全屏,如:

document.addEventListener("keydown", function(e) {
  if (e.keyCode == 13) {
    toggleFullScreen();
  }
}, false);

对于 toggleFullScreen 函数:

function toggleFullScreen() {
  if (!document.fullscreenElement &&    // alternative standard method
      !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {  // current working methods
    if (document.documentElement.requestFullscreen) {
      document.documentElement.requestFullscreen();
    } else if (document.documentElement.msRequestFullscreen) {
      document.documentElement.msRequestFullscreen();
    } else if (document.documentElement.mozRequestFullScreen) {
      document.documentElement.mozRequestFullScreen();
    } else if (document.documentElement.webkitRequestFullscreen) {
      document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    }
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }
  }
}
Toggle FullScreen

5. 全屏事件

看到这句代码你可能就懂了:

$(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange',fn);

当全屏状态改变时会触发上面的 fullscreenchange 事件,所以 #15 p2227 给我提出的问题就可以得到解决了。

 

文章可能还存在错误的地方,还请多多斧正!

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_34010949/article/details/85608658

智能推荐

利用Python学习数据挖掘【0】_夜空骑士的博客-程序员宝宝

相信看到这篇文章的你一定是对数据分析,数据挖掘有兴趣,或者想从事和方面。本文不再累述python对数据分析的重要,数据分析这门的由来之类的。在这里,我单刀直入,已我学习数据挖掘3年来的经历告诉大家怎么去学,以让大家少走弯路。纯个人见解,如有不对,还请各位留言指教。话不多说,直接放图。一  学好工具python语言推荐看廖雪峰的python3教程。数据分析python基础...

linux下内联函数实现浅析_caoyan_12727的博客-程序员宝宝

首先我们来看看内联函数的相关解释:1.引入目的:为了解决程序中函数调用的效率问题2.  优点:节省了函数调用时间,也就是说没有call指令(也就没有相关参数的压栈(push),跳转(jmp),返回(ret), 参数出栈(add $0x10,%esp)等等一系类的操作,可谓是节省了不少功夫),以空间换时间.3. 缺点:在调用出的代码量会增加很多。在编译器没有将相关函数处理成内联函数时(为

MacBook Air发热严重,如何自检_ITACHI.鼬的博客-程序员宝宝_mac发热

温度对于电脑来说很重要,温度高了会导致电脑运行缓慢,死机等情况。特别是在炎热的夏天,你的电脑的温度正常么,是否能够正常运行呢?如果你的MacBook Air发热比较严重的话可以来看下这篇文章,macz小编为您提供了5个技巧和窍门帮您进行修复。为什么我的MacBook Air会这么热?很多问题都可能导致MacBook Air发热,从堆积的灰尘到大量浏览器选项卡。这些是每台电脑都需要应对的问题,但是MacBook似乎比大多数机器要严重很多。从2019年开始,MacBook Air似乎特别容易出现过热问题,

详细介绍什么是卡片式设计用户界面_hbblzjy的博客-程序员宝宝

作者:Nick Babich日期:2016/10/11原文链接:https://www.smashingmagazine.com/2016/10/designing-card-based-user-interfaces/网页和手机应用正彻底地从页面转向个性化体验,这些新的体验建立在许多单个内容的聚合上,而这些内容目前以卡的形式来呈现。卡片式的交互方式正在广泛传播,无论是新闻网站或是外卖应用,你都可

Inception-Resnet-V2 Pre-train 总结_RainbowSun1102的博客-程序员宝宝

工作之后有点小忙碌,一直都没来得及更新博客。这是工作之后的第一篇博客。Mark一下自己,快要一个月了,快要发工资了,R神很高兴啊。今天在工作培训中,需要运用InceptionV4-Resnet-V2进行图片的分类。由于InceptionV4的网络很深,所以直接训练是很不理智的,于是下载了Pre-train的模型。网络文章地址:http://arxiv.org/abs/1602.0726...

javascript学习路线level分级_webnoob的博客-程序员宝宝_js的level

【第677期】前端自学路线之js篇 2016-08-20吕大豹 前端早读课 前端早读课前端早读课 微信号 FeZaoDuKe 功能介绍 关注前端,产品设计。  每天5点半推送1篇相关文章到公众号,我们不创造内容,我们只是优秀内容的搬运者。  坚持每天阅读,每天进步一点点 前言八月份第三个周末了,今天我们来看的是前端早读课专栏作者@吕大

随便推点

jquery 简单的进度条实现代码_chinajobs的博客-程序员宝宝_jquery进度条代码

效果图需要用到的图片:背景图片:进度显示图片:网页结构:复制代码 代码如下: css代码: 代码 复制代码 代码如下:#center{ margin:50px auto; width:400px; } #loading{ width:397px; height:49px; back

windows10安装db2数据库_xinlianluohan的博客-程序员宝宝_win10安装db2

1.下载链接:https://pan.baidu.com/s/19RjLL1b1HWsb5PlUFrJG-g提取码:0e4c2. 解压解压后,如下:3. 安装解压后,自动弹出如下窗口,或者双击打开 setup.exe:选择安装产品4.测试安装是否成功因为安装以上安装成功后,默认数据库实例为:DB2,默认数据库为:SAMPLE。那么我们连上SAMPLE就表示安装成功了。用管理员身份,打开:输入connect to sample回车,连接到SAMPLE 数...

树莓派开发之旅(一)——使用Nomachine进行远程连接_lzzzzzzm的博客-程序员宝宝_nomachine怎么用

系列文章目录文章目录系列文章目录前言一、树莓派Nomachine下载二、Windows端操作总结前言最近又开始捣鼓起树莓派起来,用树莓派安装完系统镜像后的第一步就是对电脑进行远程连接,方便后续开发。树莓派可以使用的远程连接方式有很大,ssh,VNC等等,而使用Nomachine进行连接,是我个人认为最简单,最方便,且连接效果最好的方式了,在这里给大家分享一下一、树莓派Nomachine下载整个步骤也十分简单,下载完后解压,Nomachine会自动配置好和安装好NX,电脑端也下载即可连接。No

Android Input System分析(三)--Native_不服老的码农的博客-程序员宝宝

本来想跟大家讲一下设备节点的,后来发现这方面的资料很多,大家可以到网站自行搜索一下就可以了。在linux系统里,万物皆以文件的形式来处理,设备节点其实就是一个个文件,而且这些个文件对用户空间是开放的,而且是对不同的进程访问都是开放的,也就是说用户空间可以对内核空间的设备节点文件进行读写操作,从而到达数据传输的目的。Android大名鼎鼎的Binder其实也是这个原理实现的。好了,我们还是进入到

定义一个手机类Phone,包含三个属性品牌(brand)、价格(price)、颜色(color)。 创建四个手机("小米"、"华为"、"魅族"、"oppo")对象存入ArrayList集合中,并遍历输..._weixin_30371469的博客-程序员宝宝

package cn.DongPhone;public class Phone { String brand; float price; String color;}//==================================================================package cn.DongPhone;import java.util.Arr...

推荐文章

热门文章

相关标签