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

全屏接口提供了简单的方式通过用户整个屏幕展示浏览器的内容。这个接口让我们很轻松的引导浏览器使一个元素和它的子元素占据整个屏幕,并且从屏幕上消除所有浏览器用户界面和其它应用程序。

一、接口使用(以谷歌浏览器为例)

1.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
---------------------
作者:mazeyqian
来源:CSDN
原文:https://blog.csdn.net/mazeyqian/article/details/78950577?utm_source=copy
版权声明:本文为博主转载文章,转载请附上原文链接!

原文地址:https://www.cnblogs.com/joyco773/p/9792170.html

时间: 2024-10-09 00:48:41

HTML5全屏浏览器兼容方案的相关文章

HTML5全屏背景视频与 CSS 和 JS(插件或库)

译文原链接:http://codetheory.in/html5-fullscreen-background-video/ 前言: 当网页载入时,自动播放的全屏背景视频已经成为当前颇受欢迎的趋势. 就个人而言,我认为自动播放.质量好的视频会增加用户/客户的参与度.应该记住,视频的故事必须与品牌相关. 近年来,我们被FB和Twitter等社交网络上的大量视频所包围. 据研究由此引起了用户更多的参与. 最近我不得不在一个网站上实现相同的功能,因此我决定构建一个用到 HTML5 视频元素并且易于使用的

HTML5 全屏特性

全屏功能是浏览器很早就支持的一项功能了,可以让你页面中的video, image ,div 等等子元素实现全屏浏览,从而带来更好的视觉体验,来看看怎么使用吧.先来看看有哪些API和事件支持. API // 元素请求全屏显示 element.requestFullscreen() // 检测文档的当前状态是否允许执行全屏操作 document.fullscreenEnabled() //当前显示的元素是否处于全屏状态,如果处于,则返回为非空对象,否则返回null document.fullscre

HTML5 全屏化操作功能

由于项目中用到了全屏化挫折功能,查看了API后写了一个简单的全屏化model <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .div1{ width: 1000px;height: 500px; border: solid 1px blue;

How to Use HTML5 FUll Screen API(怎样使用HTML5全屏接口)

原文链接:http://www.sitepoint.com/use-html5-full-screen-api/ 假设你不太喜欢变化太快的东西,那么web开发可能不适合你. 我曾在2012年末有写过Full-Screen API的介绍,而且当时就提到事实上现细节可能会被改动,可是没有想到一年后我须要重写!本篇的所讲的内容或许不是最新的.可是很感谢David Storey帮我重点归纳出最近技术方面的变化.... 什么是Full-Screen API? 此API能够使单个元素全屏显示. 与按下F11

html5 全屏滚动活动页学习

先看几个具体的实例: 1.腾讯娱乐:http://ent.qq.com/zt2014/qqent/h5.htm?from=groupmessage&isappinstalled=0 2.苏宁互联 :http://image.suning.cn/images/game/hlwx/index.html?from=timeline&isappinstalled=0#rd3.qq音乐:http://y.qq.com/m/act/year10/04.html?ADTAG=weixin&fro

利用 chrome 做本地HTML5全屏应用

现在HTML5已经很强大了,如何让网页看起来像本地应用呢?仅chrome浏览器就可以实现.(但当然只能使用HTML的功能,不能操作本地系统) 以百度为例: 使用chrome打开百度 https://www.baidu.com/ 打开chrome 菜单>更多工具>创建应用快捷方式 将在桌面创建一个打开网站的快捷方式,打开快捷方式,则浏览器无地址栏,看起来像个应用了. 但还有标题栏,如何全屏运行呢?在应用的快捷方式后面添加参数 --kiosk,就可全屏. 当然如果你压根都没有网站或不需要联网,则可

How to Use HTML5 FUll Screen API(如何使用HTML5全屏接口)

原文链接:http://www.sitepoint.com/use-html5-full-screen-api/ 如果你不太喜欢变化太快的东西,那么web开发可能不适合你.我曾在2012年末有写过Full-Screen API的介绍,并且当时就提到其实现细节可能会被修改,但是没有想到一年后我需要重写!本篇的所讲的内容也许不是最新的,但是非常感谢David Storey帮我重点归纳出近期技术方面的变化.... 什么是Full-Screen API? 此API可以使单个元素全屏显示.与按下F11键强

html5——全屏显示

基本概念 1.HTML5规范允许用户自定义网页上任一元素全屏显示 2.requestFullscreen() 开启全屏显示.cancleFullscreen() 关闭全屏显示 3.不同浏览器兼容性不一样 4.全屏伪类div:-ms-fullscreen,表示在全屏后的状态 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&g

Android开发中的全屏背景显示方案

引子 不管是Android还是iOS平台中,都可以看到一些应用在启动的时候会先出现一个启动画面(Splash Activity),如QQ.微信等.这个启动画面中往往会将ActionBar和Status Bar隐藏掉,然后用户进入一种沉浸的状态,形成更强烈的视觉冲击.一方面,这可以给用户留下更深刻的使用体验,从而产生一定品牌效应:另一方面,也给应用的启动初始化留下了充裕的时间,避免因为启动时间过长而给用户留下不良的印象.因此,全屏显示在手机应用中得到了广泛的应用.那么这篇博客中就记录下全屏显示的一