HTML5全屏API
这样,web开发工程师就可以再网站中设计一个按钮,当该按钮被点击时就让浏览器进入全屏模式。(就像youtube和facebook那样)
全屏代码如下:
// Assuming jQuery is available // Fullscreen the HTML document on click
$('#fullscreen-button').on('click', function() {
var doc = document.documentElement;
if (doc.requestFullscreen) {
doc.requestFullscreen();
}
});
当然这个api还只是草案,所以在应用中,需要加上前缀(mozRequestFullScreen() 和webkitRequestFullScreen())
另外:该连接只有正常点击才会生效,如果右键“在新窗口打开”或鼠标中建点击是会正常跳转的。
$('html').on('click keypress', 'a', function(event) { // 阻止默认行为及冒泡
event.preventDefault();
event.stopPropagation(); // Trigger fullscreen
if (element.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (element.webkitRequestFullScreen) {
document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
} else if (element.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else {
// fail nothing todo
} // Show fake OS and browser UI
$('#menu, #browser').show(); // Show fake target site
$('#target-site').show(); });
HTML5全屏API的更多相关文章
- HTML5 全屏 API
翻译人员: 铁锚 原文日期: 2013年12月23日 翻译日期: 2013年12月29日 原文链接: Fullscreen API 在越来越真实的web应用程序中,JavaScript也变得越来越给力 ...
- 全屏API
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2679 二.相关文章以 ...
- 使用html5中video自定义播放器必备知识点总结以及JS全屏API介绍
一.video的js知识点: controls(控制器).autoplay(自动播放).loop(循环)==video默认的: 自定义播放器中一些JS中提供的方法和属性的记录: 1.play()控制视 ...
- HTML5全屏操作API
一.定义:HTML5规范允许自定义网页上的任一元素全屏显示,存在兼容问题 二.使用: ①基本: Node.RequestFullScreen()开启全屏显示 Node.CancelFullScreen ...
- JavaScript网页全屏API
在大多数的浏览器中都有实现网页全屏显示的功能,并且大部分浏览器实现全屏显示和退出全屏显示的快捷键通常是F11和Esc两个按键.如今,W3C已经制定了关于网页全屏显示的API,利用这个API 可以实现网 ...
- HTML5全屏浏览器兼容方案
最近一个项目有页面全屏的的需求,搜索了下有HTML5的全屏API可用,不过各浏览器的支持不一样. 标准 webkit Firefox IE Element.requestFullscreen() ...
- 全屏API接口
HTML5的诞生给我们提供了很多精彩的JavaScript和HTML新功能和新特征.有些新特征我们已知多年并大量的使用,而另外一些主要是用在前沿的手机移动技术上,或者桌面应用中起辅助作用.不管这些HT ...
- HTML5全屏背景视频与 CSS 和 JS(插件或库)
译文原链接:http://codetheory.in/html5-fullscreen-background-video/ 前言: 当网页载入时,自动播放的全屏背景视频已经成为当前颇受欢迎的趋势. 就 ...
- 基于HTML5全屏图文左右滑动切换特效
基于HTML5全屏图文左右滑动切换特效.这是一款基于jQuery+HTML5实现的全屏图文切换特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <main> & ...
随机推荐
- js中一些常用的基本函数
如何使用jquery刷新当前页面下面介绍全页面刷新方法:有时候可能会用到window.location.reload()刷新当前页面.parent.location.reload()刷新父亲对象(用于 ...
- 关于Asp.net超时,延长读取sql server数据库的超时时间!(已解决)
昨天,接到客户反映说应用报“超时时间已到.在操作完成之前超时时间已过或服务器未响应”问题.从网上了一些资料,发现这个问题还是很普遍的.主要有以下两种解决方法: 第一种方法:在web.config中加上 ...
- JVM的体系结构——JVM之三
JVM的内部体系结构分为四部分, (1)类装载器(ClassLoader)子系统 作用: 用来装载.class文件 (2)执行引擎 作用:执行字节码,或者执行本地方法 (3)垃圾回收子系统 作用:垃圾 ...
- VS调试时监视上一个错误代码和错误的文本描述
以前我都是用GetLastError()然后在MSDN里面查错误原因的.现在才知道有很简便的方法: 在Watch窗口选择一行,然后输入$err,hr
- Code repo
http://www.oschina.net/news/15806/20-opensource-host-websites/
- Starling开发微信打灰机(二)
上一篇中,已经把starling开发环境搭建好,那么现在开始写代码. 这一篇来完成打灰机的欢迎界面. 游戏素材下载 首先创建Asset.as来加载图片,声音和字体等资源,其中只有两张背景图是单独的图片 ...
- JIRA官方:JIRA报表与分析
访问重要的问题 JIRA系统内置的过滤器可以使你快速访问最重要的问题.通过保存和收藏自定义的过滤器,你可以随时了解项目和团队的优先级. 保持团队同步 创建一个过滤器,可以保存你的任何搜索条件.通过分享 ...
- hdu 1253 胜利大逃亡_三维
第一次做三维的题,这题跑g++超时了,c++过了. #include<iostream> #include<cstdio> #include<queue> usin ...
- linux内核--进程地址空间(一)
引言:现代操作系统提供了一种对内存的抽象概念,叫做虚拟存储器,它为每个进程提供了一个大的,一致的,和私有的地址空间.通过一个很清晰的机制,虚拟存储器提供了3个重要的能力: 1)它将主存看成是一个存储在 ...
- 电脑中已有VS2005和VS2010安装.NET3.5失败的解决方案
1.重启 MSI 安装服务: 运行-输入“CMD”命令,在弹出的对话框中输入命令: msiexec/unregserver ,回车,并再次输入 msiexec/regserver . 2.启用 Pri ...