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

// 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. 【C#】C#创建自定义Object对象

    艹,老是忘!!! }; 记录一下,var obj = new { Name="lily",Age=12};

  2. JVM 内存初学 堆(heap)、栈(stack)和方法区(method)

    这两天看了一下深入浅出JVM这本书,推荐给高级的java程序员去看,对你了解JAVA的底层和运行机制有比较大的帮助.废话不想讲了.入主题:先了解具体的概念:JAVA的JVM的内存可分为3个区:堆(he ...

  3. UNIX网络编程中的字节序问题

    1.inet_pton 函数原型: inet_pton:将“点分十进制” -> “二进制整数” int inet_pton(int af, const char *src, void *dst) ...

  4. JavaScript中调皮的undefined

    JavaScript中调皮的undefined 在JavaScript中undefined只是一个标识符,不是关键字,这个很不靠谱的标识符还不能像其他符号一样随意使用,一方面是需要它的原始值保持不变, ...

  5. HDU 1017(** **)

    题意是给定 n,m,问有多少组(a,b)满足 0 < a < b < n 而且 (a ^ 2 + b ^ 2 + m) / ( a * b ) 是整数. 直接模拟即可. 代码如下: ...

  6. Golang入门教程(十五)指针

    什么是指针? 指针是一个变量,用于存储另一个变量的内存地址. 在上面的例子中,变量b的值是156,存储在内存地址0x1040a124. 变量a包含b的地址. 可以说现在a指向b. 声明指针 指向类型  ...

  7. oracle修改密码为永久不过期

    sqlplus /as sysdba ALTER PROFILE DEFAULT LIMIT PASSWORD_LIFE_TIME UNLIMITED;

  8. 错误 3 未找到类型“sdk:Label”。请确保不缺少程序集引用并且已生成所有引用的程序集。

    错误: 错误 3 未找到类型“sdk:Label”.请确保不缺少程序集引用并且已生成所有引用的程序集. 错误 1 命名空间“http://schemas.microsoft.com/winfx/200 ...

  9. Lua Doc生成工具

    Luadoc http://keplerproject.github.io/luadoc/ Overview LuaDoc is a documentation generator tool for ...

  10. Oracle数据库XXE注入漏洞(CVE-2014-6577)分析

    在这篇文中,我们将共同分析一下Oracle数据库的XXE注入漏洞(CVE-2014-6577),Oracle公司1月20日发布了针对该漏洞的相关补丁. 有关XXE的相关知识,可以查看安全脉搏站内的另一 ...