浏览器全屏模式的启动函数requestFullscreen仍然需要附带各浏览器的js方言前缀

  1. // 判断各种浏览器,找到正确的方法
  2. function launchFullscreen(element) {
  3. if(element.requestFullscreen) {
  4. element.requestFullscreen();
  5. } else if(element.mozRequestFullScreen) {
  6. element.mozRequestFullScreen();
  7. } else if(element.webkitRequestFullscreen) {
  8. element.webkitRequestFullscreen();
  9. } else if(element.msRequestFullscreen) {
  10. element.msRequestFullscreen();
  11. }
  12. }
  1. // 启动全屏!
  2. launchFullScreen(document.documentElement); // 整个网页
  3. launchFullScreen(document.getElementById("videoElement")); // 某个页面元素
    对你想要全屏显示的页面元素调用全屏方法,浏览器窗口就会变成全屏,但会先请求用户允许全屏模式。要注意,用户很有可能会拒绝全屏模式。如果用户运行全屏模式,则浏览器的工具条等按钮菜单都会隐藏,你的页面会覆盖整个屏幕。

退出全屏模式

这个exitFullscreen方法(也需要加浏览器前缀)会让浏览器退出全屏模式,变成正常模式。

  1. // 判断浏览器种类
  2. function exitFullscreen() {
  3. if(document.exitFullscreen) {
  4. document.exitFullscreen();
  5. } else if(document.mozCancelFullScreen) {
  6. document.mozCancelFullScreen();
  7. } else if(document.webkitExitFullscreen) {
  8. document.webkitExitFullscreen();
  9. }
  10. }
  1.  
  1. // 退出全屏模式!
  2. exitFullscreen();

需要注意的是,exitFullscreen只能由document对象调用,而不是启动全屏时传入的对象。

全屏属性和事件

不幸的是,全屏属性和事件的相关方法也需要添加浏览器前缀,但我相信很快就不需要这样做了。

  • document.fullScreenElement: 全屏显示的网页元素。
  • document.fullScreenEnabled: 判断当前是否处于全屏状态。

fullscreenchange事件会在启动全屏或退出全屏时触发:

  1. var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;
  2. var fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled;

你仍然可以使用上面判断浏览器种类的方法给这个事件加上前缀。

全屏样式CSS

各种浏览器都提供了一个非常有用的全屏模式时的css样式规则:

  1. :-webkit-full-screen {
  2. /* properties */
  3. }
  4.  
  5. :-moz-full-screen {
  6. /* properties */
  7. }
  8.  
  9. :-ms-fullscreen {
  10. /* properties */
  11. }
  12.  
  13. :full-screen { /*pre-spec */
  14. /* properties */
  15. }
  16.  
  17. :fullscreen { /* spec */
  18. /* properties */
  19. }
  20.  
  21. /* deeper elements */
  22. :-webkit-full-screen video {
  23. width: 100%;
  24. height: 100%;
  25. }
  26.  
  27. /* styling the backdrop*/
  28. ::backdrop {
  29. /* properties */
  30. }
  31. ::-ms-backdrop {
  32. /* properties */
  33. }

有些情况下,WebKit样式会出现一些问题,你最好把这些样式保持简洁。

文章来源:http://www.weste.net/2014/4-4/96193.html

js 让浏览器全屏模式的方法launchFullscreen的更多相关文章

  1. [转] JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件

    [From] http://www.jb51.net/article/76695.htm HTML 5中的full screen,目前可以在除IE和opera外的浏览器中使用 ,有的时候用来做全屏AP ...

  2. 关于通过JS识别浏览器类型的方法

    JS检测浏览器类型的方法   网络上一般采用navigator.userAgent判断浏览器标识的办法,但是有个麻烦的问题是IE11不断升级之后,IE11的userAgent变成: "Moz ...

  3. JS判断浏览器类型的方法总结(IE firefox chrome opera safari)

    JS判断浏览器类型的方法总结,可判别当前客户端所使用的浏览器是ie,firefox,safari,chrome或者是opera,另外js可以精确判断到ie浏览器的版本,依然直接上代码,需要的朋友可按照 ...

  4. Js解析浏览器路径的方法

    方法如下:function parseURL(url) { var a = document.createElement('a'); //创建一个链接 a.href = url; return { s ...

  5. js禁止浏览器滚屏方法

    在有些需求中需要对页面进行限制页面的查看权限,阻止用户滚动浏览器.那么我们就要禁止鼠标的滚动事件,并且如果浏览器的滚动事件一旦触发我们就将滚动条重置为0就可以了.以下是具体代码: //出现滚动值立马归 ...

  6. JS开启浏览器全屏模式,需要手动触发

    <html > <meta charset="UTF-8"> <body> <button onclick="launchFul ...

  7. JS关于浏览器尺寸的方法

    document.body.clientWidth BODY对象宽度.通配符未清零margin的时候,小于页面可见区域宽度document.body.clientHeight BODY对象高度.doc ...

  8. JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件

    实现全屏 个人版:function isFullScreen() { var fullscreenElement = document.fullscreenElement || document.we ...

  9. js控制浏览器全屏

    HTML 5中的full screen,目前可以在除IE和opera外的浏览器中使用 ,有的时候用来做全屏API,游戏呀,等都很有用.先看常见的API element.requestFullScree ...

随机推荐

  1. qt环境下Mapx组建的编程---------regoin

    #include "widget.h" #include "ui_widget.h" #include <QPushButton> #include ...

  2. ReferenceError: $ is not defined (绝对路径和相对路径)

    今天使用JQuery时,进入js文件后一直达不到想要的效果,在firebug上调试后发现报错提示"ReferenceError: $ is not defined",显然,这是JQ ...

  3. 2016-09-19: linux后台运行

    linux后台运行命令两种方式: 1. command & : 后台运行,你关掉终端会停止运行   2. nohup command & : 后台运行,你关掉终端也会继续运行 简介 L ...

  4. 【ORM】--FluentNHibernate之基本映射详解

           最近在做项目的时候用到了NHibernate,使用它并不困难,但是很麻烦.如果我的数据库有几百张表如果想要一个个的映射岂不是很麻烦,所以这种情况下使用NHibernate就会很笨重,虽然 ...

  5. C#小写数字金额转换成大写人民币金额的算法

    C#小写数字金额转换成大写人民币金额的算法 第一种方法: using System.Text.RegularExpressions;//首先引入命名空间 private string DaXie(st ...

  6. sea.js 入门

    上个月学了 require.js 现在顺便来学学 sea.js. 对比下这两种的区别,看自己喜欢哪个,就在接下来的项目中去使用它吧. seajs中的所有 JavaScript 模块都遵循 CMD 模块 ...

  7. Tomcat安装后,远程IP无法访问的问题。

    我在使用阿里云与聚石塔的时候,发现Tomcat启动后,本地可以访问,但是外网无法访问,即使关闭防火墙也无法访问. 原因是 云平台的网络拦截. 阿里云:有一个入网规则 和 出网规则 ,流入数据端口  流 ...

  8. OpenSSL主配置文件openssl.cnf

    虽说配置文件很多设置不用修改就能直接使用,但是了解它是配置openssl相关事项所必须的.而且要实现复杂多功能,必然要对配置相关了然于心. 1.man config 该帮助文档说明了openssl.c ...

  9. Xamarin Android自学和实践步骤

    一.入门(已完成) 1.学习Xamarin Android项目的基本结构 2.学习界面布局的基本方式 3.学习基本编码规则 4.学习页面跳转和传值 5.学习对话框和提示信息显示方法 6.学习使用系统剪 ...

  10. Java画图程序设计

    本文讲述一个画图板应用程序的设计,屏幕抓图如下: 『IShape』 这是所有图形类(此后称作模型类)都应该实现接口,外部的控制类,比如画图板类就通过这个接口跟模型类“交流”.名字开头的I表示它是一个接 ...