js 让浏览器全屏模式的方法launchFullscreen
浏览器全屏模式的启动函数requestFullscreen仍然需要附带各浏览器的js方言前缀
// 判断各种浏览器,找到正确的方法 function launchFullscreen(element) {if(element.requestFullscreen) {element.requestFullscreen();} else if(element.mozRequestFullScreen) {element.mozRequestFullScreen();} else if(element.webkitRequestFullscreen) {element.webkitRequestFullscreen();} else if(element.msRequestFullscreen) {element.msRequestFullscreen();} }
// 启动全屏! launchFullScreen(document.documentElement); // 整个网页 launchFullScreen(document.getElementById("videoElement")); // 某个页面元素对你想要全屏显示的页面元素调用全屏方法,浏览器窗口就会变成全屏,但会先请求用户允许全屏模式。要注意,用户很有可能会拒绝全屏模式。如果用户运行全屏模式,则浏览器的工具条等按钮菜单都会隐藏,你的页面会覆盖整个屏幕。
退出全屏模式
这个exitFullscreen方法(也需要加浏览器前缀)会让浏览器退出全屏模式,变成正常模式。
// 判断浏览器种类 function exitFullscreen() {if(document.exitFullscreen) {document.exitFullscreen();} else if(document.mozCancelFullScreen) {document.mozCancelFullScreen();} else if(document.webkitExitFullscreen) {document.webkitExitFullscreen();} }
// 退出全屏模式! exitFullscreen();
需要注意的是,exitFullscreen只能由document对象调用,而不是启动全屏时传入的对象。
全屏属性和事件
不幸的是,全屏属性和事件的相关方法也需要添加浏览器前缀,但我相信很快就不需要这样做了。
- document.fullScreenElement: 全屏显示的网页元素。
- document.fullScreenEnabled: 判断当前是否处于全屏状态。
fullscreenchange事件会在启动全屏或退出全屏时触发:
var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement; var fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled;
你仍然可以使用上面判断浏览器种类的方法给这个事件加上前缀。
全屏样式CSS
各种浏览器都提供了一个非常有用的全屏模式时的css样式规则:
:-webkit-full-screen {/* properties */ }:-moz-full-screen {/* properties */ }:-ms-fullscreen {/* properties */ }:full-screen { /*pre-spec *//* properties */ }:fullscreen { /* spec *//* properties */ }/* deeper elements */ :-webkit-full-screen video {width: 100%;height: 100%; }/* styling the backdrop*/ ::backdrop {/* properties */ } ::-ms-backdrop {/* properties */ }
有些情况下,WebKit样式会出现一些问题,你最好把这些样式保持简洁。
文章来源:http://www.weste.net/2014/4-4/96193.html
转载于:https://www.cnblogs.com/viva-yue/p/Fullscreen.html
js 让浏览器全屏模式的方法launchFullscreen相关推荐
- JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
项目中做过大屏展示功能,其中需求是需要全屏展示,正好HTML 5中的full screen满足需求,在此记录下. HTML 5中的full screen,目前可以在除IE和opera外的浏览器中使用 ...
- html控制浏览器全屏,JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件_javascript技巧...
HTML 5中的full screen,目前可以在除IE和opera外的浏览器中使用 ,有的时候用来做全屏API,游戏呀,等都很有用.先看常见的API element.requestFullScree ...
- 各种浏览器全屏模式的方法、属性和事件介绍
HTML 5中的full screen,目前可以在除IE和opera外的浏览器中使用 ,有的时候用来做全屏API,游戏呀,等都很有用.先看常见的API element.requestFullScree ...
- html js 浏览器语言,js 判断浏览器语言的方法
今天遇到一个要根据浏览器设置语言的类型,来展示网站的字体.比如,浏览器的语言是中文简体,那么网站也要显示中文简体字,如果是繁体或是英文都要根据浏览器当前设置的语言进行显示.那么,飞鸟慕鱼博客来和大家说 ...
- JS判断浏览器类型的方法【转】
在网站前端开发中,浏览器兼容性问题本已让我们手忙脚乱,Chrome的出世不知道又要给我们添多少乱子.浏览器兼容性是前端开发框架要解决的第一个问题,要解决兼容性问题就得首先准确判断出浏览器的类型及其版本 ...
- requestFullscreen各种浏览器全屏模式的兼容方法记录和在TV项目的应用
启动全屏 浏览器全屏模式的启动函数requestFullscreen,需要附带各浏览器的js方言前缀: // 判断各种浏览器,找到正确的方法 function launchFullscreen(ele ...
- html监听页面关闭事件,JS针对浏览器窗口关闭事件的监听方法集锦
本文实例总结了JS针对浏览器窗口关闭事件的监听方法.分享给大家供大家参考,具体如下: 方式一:(适用于IE浏览器,而且刷新不提示,只在点击浏览器关闭按钮的时候提示) window.οnbefοreun ...
- js判断wifi_使用JS在浏览器中判断当前网络连接状态的几种方法
使用JS在浏览器中判断当前网络状态的几种方法如下: 1. navigator.onLine 2. ajax请求 3. 获取网络资源 4. bind() 1. navigator.onLine 通过na ...
- js技术要点---document.write()方法在IE浏览器和火狐浏览器下面的兼容性问题
2.js技术要点---document.write("")方法在IE浏览器和火狐浏览器下面的兼容性问题 技术qq交流群:JavaDream:251572072 教程下载,在线交流 ...
最新文章
- 海量数据库的查询优化及分页算法方案
- [实变函数]6 微分与不定积分
- linux 共享内存 查看和删除
- Java进阶:volatile使用详解
- 2021年12月2日星期四的 Hybris Eclipse 导入尝试
- filecoin白皮书_Filecoin收益知多少?
- Jmeter跨线程组传递参数
- nacos启动_nacos微服务注册中心
- Python编写的桌面图形界面程序实现更新检测和下载安装
- python创建自定义函数is_number()来判断一个字符是否是数字
- Hbase 操作命令
- python装饰器详解
- ubuntu下安装万能五笔
- eclipse离线搭建maven项目,配置本地仓库,并创建mybatis项目
- Oracle Coherence 3.5 读书笔记之3 - 满足性能,可扩展和可用性目标
- STM32+光敏模块
- 解决0xc000012f 损坏的映像rasman.dll没有被指定在windows运行问题
- python手机触屏代码_使用python实现触摸?
- Swagger如何屏蔽某些接口显示
- 腾讯云开发小程序课程笔记