最近一个项目有页面全屏的的需求,搜索了下有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
版权声明:本文为博主转载文章,转载请附上原文链接!

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

  1. HTML5全屏操作API

    一.定义:HTML5规范允许自定义网页上的任一元素全屏显示,存在兼容问题 二.使用: ①基本: Node.RequestFullScreen()开启全屏显示 Node.CancelFullScreen ...

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

    译文原链接:http://codetheory.in/html5-fullscreen-background-video/ 前言: 当网页载入时,自动播放的全屏背景视频已经成为当前颇受欢迎的趋势. 就 ...

  3. 基于HTML5全屏图文左右滑动切换特效

    基于HTML5全屏图文左右滑动切换特效.这是一款基于jQuery+HTML5实现的全屏图文切换特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <main> & ...

  4. HTML5 全屏特性

    全屏功能是浏览器很早就支持的一项功能了,可以让你页面中的video, image ,div 等等子元素实现全屏浏览,从而带来更好的视觉体验,来看看怎么使用吧.先来看看有哪些API和事件支持. API ...

  5. HTML5 全屏化操作功能

    由于项目中用到了全屏化挫折功能,查看了API后写了一个简单的全屏化model <!DOCTYPE html> <html> <head> <meta http ...

  6. 利用 chrome 做本地HTML5全屏应用

    现在HTML5已经很强大了,如何让网页看起来像本地应用呢?仅chrome浏览器就可以实现.(但当然只能使用HTML的功能,不能操作本地系统) 以百度为例: 使用chrome打开百度 https://w ...

  7. html5 全屏滚动活动页学习

    先看几个具体的实例: 1.腾讯娱乐:http://ent.qq.com/zt2014/qqent/h5.htm?from=groupmessage&isappinstalled=0 2.苏宁互 ...

  8. HTML5全屏API

    现在大多数浏览器都有全屏功能,允许用户来设置或操作.但HTML5的全屏API与之不同,HTML5的全屏API允许web开发工程师在程序中调用. 这样,web开发工程师就可以再网站中设计一个按钮,当该按 ...

  9. How to Use HTML5 FUll Screen API(如何使用HTML5全屏接口) 【精】

    原文链接:http://www.sitepoint.com/use-html5-full-screen-api/ 如果你不太喜欢变化太快的东西,那么web开发可能不适合你.我曾在2012年末有写过Fu ...

随机推荐

  1. vivado place30-378

    AR# 60131 Vivado Placer - [Place 30-378] Input pin of input buffer has an illegal connection to a lo ...

  2. java 中的基本数据类型

    1,  变量 Java是强类型语言, 对于每一种数据都定义了类型,基本数据类型分为数值型,字符型,布尔型.数值型又分为了整型和浮点型. 整型又分为byte, int, short long. 浮点型又 ...

  3. js 实现论坛评论模块原理

    <body>   <table id="tb" border="1">   <tbody id="tbd"&g ...

  4. Centos6 iptables 防火墙设置【转】

    1.指令 vi /etc/sysconfig/iptables 添加以下内容和要开放的端口 # Firewall configuration written by system-config-fire ...

  5. sql 找出不包含字母、不包含汉字的数据

    --1.不包含字母 SELECT * FROM t WHERE str NOT LIKE '%[a-zA-Z]%' SELECT * FROM t --2.不包含汉字 SELECT * FROM t ...

  6. CF2B The least round way(dp+记录路径)

    B. The least round way time limit per test 2 seconds memory limit per test 64 megabytes input standa ...

  7. BZOJ2870 最长道路

    题意:给定树,有点权.求一条路径使得最小点权 * 总点数最大.只需输出这个最大值.5w. 解:树上路径问题,点分治. 考虑合并两个子树的时候,答案的形式是val1 * (d1 + d2),当1是新插入 ...

  8. java-查看java源码

    安装jdk后,自己的pc下自然而然就可以找到java的源码包.

  9. https://www.chromestatus.com/features/5093566007214080

    移动端滑动报错:Unable to preventDefault inside passive event listener due to target being treated as passiv ...

  10. NOI-OJ 2.2 ID:8758 2的幂次方表示

    思路 可以把任意一个数转化为2^a+2^b+2^c+...+2^n 例如137的二进制为10001001,这就等效于2^7+2^3+2^0 以上结果如何通过程序循环处理呢?需要把数字n分解为上述公式, ...