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> & ...
随机推荐
- Azure上Linux虚拟机Mac地址的持久化
有些用户在使用Azure Linux 虚拟机安装软件时,有些软件的license会和当前系统的mac地址绑定,那么在Azure VM重启,reszie(改变尺寸大小),停止然后再启动的时候,虚拟机的M ...
- MFC窗口的父子关系和层级关系
一直对窗口之间的关系有些混乱,遇到需要指定父窗口的函数时常常要考虑很久,究竟父窗口是哪个窗口,遂上网查资料,略有所悟,简记如下: 对话框中的所有控件(比如Button等)都是其子窗口. ...
- C Deepin指针
L-value -->标识了一个可以存储结果值的内存存储地址--指针变量 or 普通内存变量; R-value -->数值;
- rand,randn,randi函数区别
1,rand 生成均匀分布的伪随机数.分布在(0~1)之间 主要语法:rand(m,n)生成m行n列的均匀分布的伪随机数 rand(m,n,'double')生成指定精度的 ...
- 网易云课堂_C++程序设计入门(上)_第5单元:万类霜天竞自由 – 对象和类的更多内容_第5单元作业【4】 - 在线编程(难度:难)
第5单元作业[4] - 在线编程(难度:难) 查看帮助 返回 温馨提示: 1.本次作业属于Online Judge题目,提交后由系统即时判分. 2.学生可以在作业截止时间之前不限次数提交答案,系 ...
- hdu 5501 The Highest Mark(贪心+01背包)
题意:类似cf的赛制,每道题目有A,B,C三个值,A表示初始分数,B表示每分钟题的分数会减少B,C表示做这道题需要C分钟,数据保证分数不会变为负数.现在给出比赛时长,问安排做题的顺序,求最大得分. 思 ...
- ROS Node/Topic/Message/Service的一些问题
1.Node http://blog.exbot.net/archives/1412 (摘自老王说ros) node干的什么活?callback queue里的活.这个callback queue里的 ...
- eclipse 中的凝视 快捷键
(1)Ctrl+Space 说明:内容助理. 提供对方法,变量,參数,javadoc等得提示, 应运在多种场合,总之须要提示的时候可先按此快捷键. 注:避免输入法的切换设置与此设置冲突 (2)Ctrl ...
- ORACLE AUTOMATIC STORAGE MANAGEMENT翻译-第二章 ASM instance(1)
第二章 ASM INSTANCE ASM的类型,例如可以: 10g后ORACLE instance 类型增加了一个ASM种类.参数INSTANCE_TYPE=ASM进行设置. ASM实例启动命令: ...
- 数字温湿度传感器DHT11--操作源代码
//IO定义 #define P_DataIN_DHT11 PB0_IN #define P_DataOUT_DHT11 PB0_OUT //宏定义 #define BSET_DHT11 P_Data ...