HTML5全屏浏览器兼容方案
最近一个项目有页面全屏的的需求,搜索了下有HTML5的全屏API可用,不过各浏览器的支持不一样。
标准 | webkit | Firefox | IE |
---|---|---|---|
Element.requestFullscreen() | webkitRequestFullscreen | mozRequestFullScreen | msRequestFullscreen |
Document.exitFullscreen() | webkitExitFullscreen | mozCancelFullScreen | msExitFullscreen |
Document.fullscreenElement | webkitFullscreenElement | mozFullScreenElement | msFullscreenElement |
Document.fullscreenEnabled | webkitFullscreenEnabled | mozFullScreenEnabled | msFullscreenEnabled |
Document.fullscreenchange | webkitfullscreenchange | mozfullscreenchange | MSFullscreenChange |
Document.fullscreenerror | webkitfullscreenerror | mozfullscreenerror | MSFullscreenError |
MDN Fullscreen API: The Fullscreen API provides an easy way for web content to be presented using the user's entire screen. The API lets you easily direct the browser to make an element and its children, if any, occupy the fullscreen, eliminating all browser user interface and other applications from the screen for the duration.
全屏接口提供了简单的方式通过用户整个屏幕展示浏览器的内容。这个接口让我们很轻松的引导浏览器使一个元素和它的子元素占据整个屏幕,并且从屏幕上消除所有浏览器用户界面和其它应用程序。
一、接口使用(以谷歌浏览器为例)
1.requestFullscreen()
全屏请求方法,使用方法:Element.requestFullscreen()
。
<div id="example"><img src="html5.png"><button type="button" id="requestFullscreen">requestFullscreen</button>
</div><script>
// 全屏
document.getElementById('requestFullscreen').addEventListener('click', () => {document.querySelector('img').webkitRequestFullscreen();
});
</script>
触发事件后会有按ESC即可退出全屏模式的文字提示。
注意
1.在< iframe >框架中使用全屏需要加allowfullscreen属性。 2.全屏请求只能通过用户操作触发,否则会出现Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.这样的警告,解决办法是将此方法绑定到某个用户操作事件上,例如点击事件click
。
(function () {document.documentElement.webkitRequestFullscreen();
})();
2.exitFullscreen()
退出全屏模式的方法,使用方法:document.exitFullscreen()
,除了requestFullscreen()
其它方法和属性都是基于document
的。
<div id="example"><img src="html5.png"><button type="button" id="requestFullscreen">requestFullscreen</button><button type="button" id="exitFullscreen">exitFullscreen</button>
</div><script>
// 退出全屏
document.getElementById('exitFullscreen').addEventListener('click', () => {document.webkitExitFullscreen();
});
</script>
触发后退出全屏恢复页面原来的样子,也可以按ESC退出;另外F11也可以使页面全屏显示和退出,但这应该属于浏览器的功能,不在HTML5 API的范畴之内。
3.fullscreenElement
若是全屏模式下,显示全屏的元素,若不是,返回null
。
<div id="example"><img src="html5.png"><button type="button" id="requestFullscreen">requestFullscreen</button><button type="button" id="exitFullscreen">exitFullscreen</button><button type="button" id="fullscreenElement">fullscreenElement</button>
</div><script>
// 显示全屏元素
document.getElementById('fullscreenElement').addEventListener('click', () => {console.log(document.webkitFullscreenElement); // <div id=...></div> 或 null
});
</script>
4.fullscreenEnabled
返回一个布尔值true/false
,判断是否可用全屏模式。
<div id="example"><img src="html5.png"><button type="button" id="fullscreenEnabled">fullscreenEnabled</button>
</div><script>
// 全屏是否可用
document.getElementById('fullscreenEnabled').addEventListener('click', () => {console.log(document.webkitFullscreenEnabled); // true
});
</script>
二、浏览器兼容
由于各主流浏览器调用全屏接口的方法不一致,所以调用之前需要判断一下当前浏览器适用的方法。
我简单的做了下请求全屏和退出全屏的适配。
const MAZEY_FULL_SCREEN = function () {let prefixArr = ['', 'webkit', 'moz', 'ms'], // 浏览器前缀isRightRequest, // 是否找到适配的方法isRightExit,requestMethod, // 全屏方法exitMethod, // 退出全屏方法lowerFirst = function (str) {return str.slice(0, 1).toLowerCase() + str.slice(1);},requestSuffixArr = ['RequestFullscreen', 'RequestFullScreen'], // 后缀exitSuffixArr = ['ExitFullscreen', 'CancelFullScreen'],searchRightMethod = function (prefix, suffixArr, documentParent) {let methodArr = suffixArr.map((suffix) => {return prefix + suffix;}),method,isRight;methodArr.forEach((wholePrefix) => {if (isRight) return;if (prefix.length === 0) {wholePrefix = lowerFirst(wholePrefix)}if (wholePrefix in documentParent) {method = wholePrefix;isRight = true;// console.log(method);}});return method;};prefixArr.forEach((prefix) => {if (isRightRequest && isRightExit) return;// 查找请求requestMethod = searchRightMethod(prefix, requestSuffixArr, document.documentElement);isRightRequest = Boolean(requestMethod);// 查找退出exitMethod = searchRightMethod(prefix, exitSuffixArr, document);isRightExit = Boolean(exitMethod);});this.request = function (element) {let domEle = document.querySelector(element) || document.documentElement;domEle[requestMethod]();};this.exit = function () {document[exitMethod]();};
};let fullscreen = new MAZEY_FULL_SCREEN();
使用示例:
<h1 id="h1">html5 - 全屏</h1>
<button id="request">请求</button>
<button id="exit">退出</button>
<script src="mazey-full-screen.js"></script><script>
// 请求全屏
document.getElementById('request').addEventListener('click', () => {fullscreen.request();
});
// 退出全屏
document.getElementById('exit').addEventListener('click', () => {fullscreen.exit();
});
</script>
示例代码:GitHub
HTML5全屏浏览器兼容方案
转载于:https://www.cnblogs.com/mazey/p/8176486.html
HTML5全屏浏览器兼容方案相关推荐
- html5 safari浏览器 全屏显示 隐藏工具条,HTML5全屏API不IPhone SE Safari浏览器工作,也...
我想打一个div容器全屏等最新的iPhone,它在所有桌面浏览器和Android浏览器,但在iPhone浏览器(Safari浏览器)工作正常,它不管用.HTML5全屏API不IPhone SE Saf ...
- html5 全屏样式,HTML5 全屏特征
HTML5 全屏特性 全屏功能是浏览器很早就支持的一项功能了,可以让你页面中的video, image ,div 等等子元素实现全屏浏览,从而带来更好的视觉体验,来看看怎么使用吧.先来看看有哪些API ...
- html全屏背景视频特效,HTML5全屏背景视频特效插件Vidage.js源码
下面我们对HTML5全屏背景视频特效插件Vidage.js源码文件阐述相关使用资料和HTML5全屏背景视频特效插件Vidage.js源码文件的更新信息. HTML5全屏背景视频特效插件Vidage.j ...
- HTML5全屏页面滚动个人简历模板
简介: HTML5全屏页面滚动个人简历模板,响应式设计,自适应屏幕分辨率,兼容PC端和手机移动端,单页面,多栏目,有工作经验.联系我.技能.关于我等栏目. 网盘下载地址: http://kekewl. ...
- 2022跨年烟花代码(四)HTML5全屏烟花动画特效
HTML5全屏烟花动画特效 html代码: <!doctype html> <html> <head> <meta charset="utf-8&q ...
- html5全屏幻灯片自动切换,html5特效-全屏幻灯片切换动画,支持拖拽
html5全屏幻灯片切换动画的特效,支持拖拽,完整源码下载地址: http://pan.baidu.com/s/1nvwcLxJ 密码: dmgr 效果预览图如下: 全屏幻灯片切换动画,支持拖拽 in ...
- HTML5期末大作业:在线音乐播放器网站设计——html5全屏的音乐列表播放器页面源码 HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设
HTML5期末大作业:在线音乐播放器网站设计--html5全屏的音乐列表播放器页面源码 HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设 ...
- How to Use HTML5 FUll Screen API(怎样使用HTML5全屏接口)
原文链接:http://www.sitepoint.com/use-html5-full-screen-api/ 假设你不太喜欢变化太快的东西,那么web开发可能不适合你. 我曾在2012年末有写过F ...
- HTML5全屏API
2019独角兽企业重金招聘Python工程师标准>>> 这几天一直在写全屏查看的功能,没想到HTML5中直接提供了全屏功能的API,看来以后事先应该先查一下HTML5有没有提供相应的 ...
最新文章
- Scikit-learn 数据预处理之鲁棒缩放RobustScaler
- adf开发_了解ADF生命周期中的ADF绑定
- 艾默生网络能源的数据中心生意经
- PHP文件上传 (以上传txt文件为例)
- iis6 服务器做301跳转返回状态码200解决方法。
- LINTCODE——吹气球
- 5分钟通过水痘事件来认识系统架构
- dds导入Unreal 4
- 目前安卓模拟器哪个比较好?
- Linux SCSI设备容量打印代码分析
- android studio中的模拟器,使用Android Studio创建Andorid模拟器
- 淘宝经典差评中评好评和回复
- Linux创建模板封装虚拟机
- 2022,烟火如常,布衣剩饭,啥也没干,年终总结,蹈海难酬
- 重走Android路 之 Android系统架构图以及开发工具了解
- C++(数据结构与算法):64---布隆过滤器(Bloom Filter)
- mysql设置最大连接数
- 三种快速排序以及快速排序的优化
- 【微服务】搭建Consul集群服务和Consul配置中心
- quartus原理图设计及 自带仿真