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> & ...
随机推荐
- knockout简单实用教程3
在之前的文章里面介绍了一些KO的基本用法.包括基本的绑定方式,基本的ko的绑定语法包括text绑定,html绑定等等(如有不明请参照上两篇文章),下面呢介绍一下关于ko的其他方面的知识.包括比较特殊绑 ...
- SQL Server 备份的 8 种方法。
方法 1. 完整备份 方法 2. 差异备份 方法 3. 部分备份(备份数据库的read_write部分) 方法 4. 文件备份 方法 5. 文件组备份 方法 6. 只复制备份 方法 7. 日志备份 - ...
- MYSQL create database 和 create table 做了一些什么!
create database Studio; 这样就可以创建一个数据库了.他包涵一些什么呢? 可以看到它创建了一个文件夹,下面我们进去看一下它里面有一些什么东西. 还是先建一张表再进去吧,运行一下这 ...
- android---EditText黄色边框
http://liuzhichao.com/p/612.html 自定义android控件EditText边框背景 柳志超博客 » Program » Andriod » 自定义android控件Ed ...
- 【关于360极速浏览器的xx极速模式自动切换到兼容模式】
原理上是可以的. 1 360基于Chromium 开源浏览器内核,它本身就是一个壳子.. 2 7.0之后的极速浏览器,不支持 它官方的那个声明标记.<meta name=”renderer” ...
- 【POJ 3009 Curling2.0 迷宫寻径 DFS】
http://poj.org/problem?id=3009 模拟冰壶的移动,给出到达终点的最少投掷次数(不可达时为-1). 具体移动规则如下: 每次选四个方向之一,沿此方向一直前进,直到撞到bloc ...
- Linux,Unix各种版本的操作系统在线安装软件命令
摘自:http://blog.csdn.net/zjg555543/article/details/8278266 linux和unix,各个版本的操作系统都有自己的软件安装方式,最方便的莫过于在线安 ...
- sql 中的 indexOf 与 lastIndexOf
DECLARE @Name NVARCHAR (50)SET @Name = '12345.67890ABCDE.FGHIJKLMNOPQRSTUVWXYZTest' DECLARE @Positio ...
- Apple Mach-O Linker Warning 警告解决的方法
此警告解决的方法: 项目名字 -> targets -> Build Settings -> search path 把里面无用的东西 点 减号 删掉 即可了. $(function ...
- android.widget.FrameLayout$LayoutParams cannot be cast to android.widget.LinearLayout$LayoutParams
http://blog.csdn.net/lilu_leo/article/details/11952717 有时候需要在在代码中设置LayoutParams,自己为一个FrameLayout设置 ...