HTML5实现全屏
现在主流的浏览器都支持全屏,但是各家实现不一。下面是主流浏览器实现方法:
// W3C 提议
element.requestFullscreen();
element.exitFullscreen();
// Webkit (works in Safari5.1 and Chrome 15)
element.webkitRequestFullScreen();
element.webkitCancelFullScreen();
// Firefox 10+
element.mozRequestFullScreen();
element.mozCancelFullScreen();
实际使用的时候我们需要做兼容,可以用函数包装起来:
//进入全屏
function requestFullScreen(element) {
var de = document.querySelector(element) || document.documentElement;
if (de.requestFullscreen) {
de.requestFullscreen();
} else if (de.mozRequestFullScreen) {
de.mozRequestFullScreen();
} else if (de.webkitRequestFullScreen) {
de.webkitRequestFullScreen();
}
}
//退出全屏
function exitFullscreen(element) {
var de = document.querySelector(element) || document.documentElement;
if (de.exitFullscreen) {
de.exitFullscreen();
} else if (de.mozCancelFullScreen) {
de.mozCancelFullScreen();
} else if (de.webkitCancelFullScreen) {
de.webkitCancelFullScreen();
}
}
封装后兼容主流浏览器用法,且支持某个指定的元素全屏,支持class、id查询。默认是对整个网页全屏。
调用方法:
requestFullScreen();
requestFullScreen('body');
requestFullScreen('#main');
可能出于安全考虑,只能手动触发才能实现全屏,浏览器自动执行无效果。通过控制台可以看到提示:API can only be initiated by a user gesture。
HTML5全屏API 相对比较简单,但是浏览器的差异性导致很丑的代码,并且不能保证它们不会再改变。如果你不想自己维护代码,你可以使用screenfull.js 这样的类库,它可以平滑过渡这些差异。
参考:
1、HTML5实现全屏API【进入和退出全屏】 - kingwell - 博客园
http://www.cnblogs.com/kingwell/p/3706352.html
2、How to Use HTML5 FUll Screen API(如何使用HTML5全屏接口) - 微个日光日 - 博客频道 - CSDN.NET
http://blog.csdn.net/xiebaochun/article/details/40143025
3、sindresorhus/screenfull.js: Simple wrapper for cross-browser usage of the JavaScript Fullscreen API
https://github.com/sindresorhus/screenfull.js/
HTML5实现全屏的更多相关文章
- 【HTML】html5 canvas全屏烟花动画特效
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
- HTML5 full-screen全屏API
这篇文章纯属记录,非常感谢张鑫旭大神的demo 原文地址: http://www.zhangxinxu.com/study/201210/html5-full-screen-api.html 代码 C ...
- HTML5实现全屏API【进入和退出全屏】
现在主流浏览器基本上实现了全屏效果,但是不同浏览器实现不一样: [进入和退出全屏] // Webkit (works in Safari5.1 and Chrome 15)element.webkit ...
- html5实现全屏的api方法
参考地址 [进入和退出全屏] // Webkit (works in Safari5.1 and Chrome 15) element.webkitRequestFullScreen(); docum ...
- HTML5全屏API
现在大多数浏览器都有全屏功能,允许用户来设置或操作.但HTML5的全屏API与之不同,HTML5的全屏API允许web开发工程师在程序中调用. 这样,web开发工程师就可以再网站中设计一个按钮,当该按 ...
- HTML5全屏浏览器兼容方案
最近一个项目有页面全屏的的需求,搜索了下有HTML5的全屏API可用,不过各浏览器的支持不一样. 标准 webkit Firefox IE Element.requestFullscreen() ...
- 原 HTML5 requestFullScreen&exitFullscreen全屏兼容方案
摘要: html5 video全屏实现方式 首先来说,这个标题具有误导性,但这样设置改标题也是主要因为video使用的比较多 在html5中,全屏方法可以适用 ...
- javascript full screen 全屏显示 页面元素
javascript full screen 全屏显示 页面元素 要想让页面的某个元素全屏显示,就像在网页上看视频的时候,可以全屏观看一样,该怎么实现呢? 一种最简单的方式,就是动态改变你想要全屏显示 ...
- JavaScript网页全屏API
在大多数的浏览器中都有实现网页全屏显示的功能,并且大部分浏览器实现全屏显示和退出全屏显示的快捷键通常是F11和Esc两个按键.如今,W3C已经制定了关于网页全屏显示的API,利用这个API 可以实现网 ...
随机推荐
- ansible Api 2.3-2.4
官网示例(python3) 说明: 在学习2.0 api的过程中遇到了一个坑,最新版的ansible(2.4)和2.3版本api引用时发生了变化,本文主要使用2.3 api进行操作,2.4只做分析 a ...
- Zookeeper+Kafka完全分布式实战部署
Zookeeper+Kafka完全分布式实战部署 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 其实我之前部署过kafak和zookeeper的完全分布式,集群是可以正常使用没错, ...
- maven构建myeclipse 工程
前提:安装maven完成后 mvn -version查看版本 一,新建WEB 工程 mvn archetype:generate -DgroupId={project-packaging} -Dar ...
- java io系列21之 InputStreamReader和OutputStreamWriter
InputStreamReader和OutputStreamWriter 是字节流通向字符流的桥梁:它使用指定的 charset 读写字节并将其解码为字符.InputStreamReader 的作用是 ...
- JAVA-获取 JDK 动态代理生成的 Class 文件
可指定路径 import sun.misc.ProxyGenerator; import java.io.FileOutputStream; import java.io.IOException; i ...
- 【1】[leetcode-124] 二叉树中的最大路径和
(没做出来,典型题目重要) 二叉树中的最大路径和(hard) 给定一个非空二叉树,返回其最大路径和. 本题中,路径被定义为一条从树中任意节点出发,达到任意节点的序列.该路径至少包含一个节点,且不一定经 ...
- 【不懂】spring bean生命周期
完整的生命周期(牢记): 1.spring容器准备 2.实例化bean 3.注入依赖关系 4.初始化bean 5.使用bean 6.销毁bean Bean的完整生命週期可以認為是從容器建立初始化Bea ...
- systemctl命令详解
一.查询服务是否开机启动 systemctl is-enabled xxx.service 二.开机运行服务 systemctl enable xxx.service 三.取消开机运行 s ...
- 在Linux上安装Git
Git是一个开源的分布式版本控制系统,可以有效.高速的处理从很小到非常大的项目版本管理.而国外的GitHub和国内的Coding都是项目的托管平台.但是在使用Git工具的时候,第一步要学会如何安装gi ...
- SSH整合方案二(不带hibernate.cfg.xml)
整体结构: 1.引入相关jar包 2.编写实体类和映射文件 package cn.zqr.domain; public class Customer { private Long cust_id; p ...