使用js来执行全屏
当用户按下F11事件,浏览器为触发自身全屏功能,这个过程我们一般是不可控制的,即使是监听了F11的键盘事件,退出全屏的时候,我们也捕捉不到退出全屏触发的事件。所以,我们就用程序自己去实现F11的功能,首先需要禁用浏览器默认的事件动作。
$(document).on('keydown', function (e) {
var e = event || window.event || arguments.callee.caller.arguments[0];
if(e && e.keyCode == 122){//捕捉F11键盘动作
e.preventDefault(); //阻止F11默认动作
var el = document.documentElement;
var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen;//定义不同浏览器的全屏API
//执行全屏
if (typeof rfs != "undefined" && rfs) {
rfs.call(el);
} else if(typeof window.ActiveXObject != "undefined"){
var wscript = new ActiveXObject("WScript.Shell");
if (wscript!=null) {
wscript.SendKeys("{F11}");
}
}
//监听不同浏览器的全屏事件,并件执行相应的代码
document.addEventListener("webkitfullscreenchange", function() {//
if (document.webkitIsFullScreen) {
//全屏后要执行的代码
}else{
//退出全屏后执行的代码
}
}, false);
document.addEventListener("fullscreenchange", function() {
if (document.fullscreen) {
//全屏后执行的代码
}else{
//退出全屏后要执行的代码
}
}, false);
document.addEventListener("mozfullscreenchange", function() {
if (document.mozFullScreen) {
//全屏后要执行的代码
}else{
//退出全屏后要执行的代码
}
}, false);
document.addEventListener("msfullscreenchange", function() {
if (document.msFullscreenElement) {
//全屏后要执行的代码
}else{
//退出全屏后要执行的代码
}
}, false)
}
}
使用js来执行全屏的更多相关文章
- 仿新浪游戏频道js多栏目全屏下拉菜单导航条
仿新浪游戏频道js多栏目全屏下拉菜单导航条,新浪,游戏频道,js组件,多栏目,全屏下拉,下拉菜单,导航条.代码下载地址:http://www.huiyi8.com/sc/26765.html更多请访问 ...
- js指定区域全屏
<html> <head> <title>js指定区域全屏</title> <style> ...
- js设置页面全屏
html代码 <!-- 全屏按钮 --> <img id="alarm-fullscreen-toggler" src="/public/index/i ...
- js 实现浏览器全屏效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- FullPage.js – 轻松实现全屏滚动(单页网站)效果
FullPage.js 是一个简单而易于使用的插件,用来创建全屏滚动网站(也被称为单页网站).除了可以创建全屏滚动效果以外,也可以给网站添加一些水平的滑块效果.能够自适应不同的屏幕尺寸,包括平板电脑和 ...
- 《fullPage.js》创建全屏滚动的网站
插件介绍 fullPage.js是一个简单易用的插件,创建全屏滚动的网站(也被称为单页网站).它允许全屏滚动创建网站,以及添加内部滑块. 浏览器兼容性 主要功能 支持鼠标滚动 支持前进后退和键盘控制 ...
- H5中用js让页面全屏
概述 意外的发现一个网页有一个按钮能使网页全屏,查了下代码发现是H5的全屏api,于是就查了下资料,记录下来供以后开发时参考,相信对其他人也有用. 参考资料: 利用js如何做到让页面全屏和不全屏功能 ...
- js控制浏览器全屏
HTML 5中的full screen,目前可以在除IE和opera外的浏览器中使用 ,有的时候用来做全屏API,游戏呀,等都很有用.先看常见的API element.requestFullScree ...
- 学习笔记: js插件 —— fullPage.js (页面全屏滚动)
fullPage.js (页面全屏滚动) 必须依赖 jquery-ui.min.js, 233K 14760个星. 以后有时间再看. API挺全 https://github.com/alvaro ...
随机推荐
- Python 之 装饰器
装饰器 中的“器”代指函数 所以装饰器本质是函数,用来装饰其它函数.例如:为其它函数添加其他功能 实现装饰器需要的知识: 高阶函数+嵌套函数 == 装饰器 1.函数就是“变量” 函数就是“变量”说的 ...
- luogu2513 逆序对数列
我们令\(f[i][j]\)表示\(i\)的全排列中,逆序数为\(j\)的个数. 我们考虑在\(i-1\)的排列中插入\(i\).\(k\)是这次更新会导致增加多少逆序数. 则\(\begin{ali ...
- 黑马MySQL数据库学习day04 MySQL变量 存储过程 用户和授权管理
/* MySQL中的变量局部变量,用户变量,会话变量和全局变量. 用户变量不用定义,直接使用. 1.用户变量赋值 set @xxx = 值; 2.查询 select @xxx; 语法帮助: 过程保存在 ...
- Exadata LVM snapshot备份失败
一台X4-2 的计算节点进行image升级,在正式升级之前利用LVM snapshot备份操作系统时备份失败,并且报大量IO错误,提示无法找到LVM snapshot的挂载点.检查文件系统状态: [r ...
- Dictionary 检测key是否存在
if(dict.ContainsKey(T key)) { //已存在key }
- 2015苏州大学ACM-ICPC集训队选拔赛(2)1004
草爷要的数 Problem Description 今天校队队员们准备放松一下,我们队就准备选一些数字玩,然而每个人喜欢的数字是不同的,刻盘喜欢x(1<=x<=1^9),凯凯喜欢y(1&l ...
- 制作网页logo
一.先把jpg.png.jpeg等图片通过在线ico图标制作软件变成.ico图片 在线制作ico图标工具: http://www.bitbug.net/ 二.在head里面添加如下代码 <lin ...
- python升级到3.*版本
转载https://blog.csdn.net/liang19890820/article/details/51079633 简述 CentOS 7 中默认安装了 Python,版本比较低(2.7.5 ...
- my23_pxc其中一个节点重建记录
PXC报废了一个节点,时间大概在周五,而此时故障的数据库节点比较多,警告信息也成百上千,此信息混合于已有的故障节点信息中,没有被及时发现:然后周六.周日各报废一个,在周一的时候,业务已经没有节点可以写 ...
- 如何 安装Yii2的高级应用程序模板
参考 https://blog.csdn.net/youngqj/article/details/46689051