现在主流的浏览器都支持全屏,但是各家实现不一。下面是主流浏览器实现方法:

// 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实现全屏的更多相关文章

  1. 【HTML】html5 canvas全屏烟花动画特效

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  2. HTML5 full-screen全屏API

    这篇文章纯属记录,非常感谢张鑫旭大神的demo 原文地址: http://www.zhangxinxu.com/study/201210/html5-full-screen-api.html 代码 C ...

  3. HTML5实现全屏API【进入和退出全屏】

    现在主流浏览器基本上实现了全屏效果,但是不同浏览器实现不一样: [进入和退出全屏] // Webkit (works in Safari5.1 and Chrome 15)element.webkit ...

  4. html5实现全屏的api方法

    参考地址 [进入和退出全屏] // Webkit (works in Safari5.1 and Chrome 15) element.webkitRequestFullScreen(); docum ...

  5. HTML5全屏API

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

  6. HTML5全屏浏览器兼容方案

    最近一个项目有页面全屏的的需求,搜索了下有HTML5的全屏API可用,不过各浏览器的支持不一样. 标准 webkit  Firefox  IE Element.requestFullscreen() ...

  7. 原 HTML5 requestFullScreen&exitFullscreen全屏兼容方案

                         摘要: html5 video全屏实现方式 首先来说,这个标题具有误导性,但这样设置改标题也是主要因为video使用的比较多 在html5中,全屏方法可以适用 ...

  8. javascript full screen 全屏显示 页面元素

    javascript full screen 全屏显示 页面元素 要想让页面的某个元素全屏显示,就像在网页上看视频的时候,可以全屏观看一样,该怎么实现呢? 一种最简单的方式,就是动态改变你想要全屏显示 ...

  9. JavaScript网页全屏API

    在大多数的浏览器中都有实现网页全屏显示的功能,并且大部分浏览器实现全屏显示和退出全屏显示的快捷键通常是F11和Esc两个按键.如今,W3C已经制定了关于网页全屏显示的API,利用这个API 可以实现网 ...

随机推荐

  1. ansible Api 2.3-2.4

    官网示例(python3) 说明: 在学习2.0 api的过程中遇到了一个坑,最新版的ansible(2.4)和2.3版本api引用时发生了变化,本文主要使用2.3 api进行操作,2.4只做分析 a ...

  2. Zookeeper+Kafka完全分布式实战部署

    Zookeeper+Kafka完全分布式实战部署 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 其实我之前部署过kafak和zookeeper的完全分布式,集群是可以正常使用没错, ...

  3. maven构建myeclipse 工程

    前提:安装maven完成后 mvn -version查看版本 一,新建WEB 工程  mvn archetype:generate -DgroupId={project-packaging} -Dar ...

  4. java io系列21之 InputStreamReader和OutputStreamWriter

    InputStreamReader和OutputStreamWriter 是字节流通向字符流的桥梁:它使用指定的 charset 读写字节并将其解码为字符.InputStreamReader 的作用是 ...

  5. JAVA-获取 JDK 动态代理生成的 Class 文件

    可指定路径 import sun.misc.ProxyGenerator; import java.io.FileOutputStream; import java.io.IOException; i ...

  6. 【1】[leetcode-124] 二叉树中的最大路径和

    (没做出来,典型题目重要) 二叉树中的最大路径和(hard) 给定一个非空二叉树,返回其最大路径和. 本题中,路径被定义为一条从树中任意节点出发,达到任意节点的序列.该路径至少包含一个节点,且不一定经 ...

  7. 【不懂】spring bean生命周期

    完整的生命周期(牢记): 1.spring容器准备 2.实例化bean 3.注入依赖关系 4.初始化bean 5.使用bean 6.销毁bean Bean的完整生命週期可以認為是從容器建立初始化Bea ...

  8. systemctl命令详解

    一.查询服务是否开机启动   systemctl is-enabled xxx.service 二.开机运行服务   systemctl enable xxx.service 三.取消开机运行   s ...

  9. 在Linux上安装Git

    Git是一个开源的分布式版本控制系统,可以有效.高速的处理从很小到非常大的项目版本管理.而国外的GitHub和国内的Coding都是项目的托管平台.但是在使用Git工具的时候,第一步要学会如何安装gi ...

  10. SSH整合方案二(不带hibernate.cfg.xml)

    整体结构: 1.引入相关jar包 2.编写实体类和映射文件 package cn.zqr.domain; public class Customer { private Long cust_id; p ...