当用户按下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来执行全屏的更多相关文章

  1. 仿新浪游戏频道js多栏目全屏下拉菜单导航条

    仿新浪游戏频道js多栏目全屏下拉菜单导航条,新浪,游戏频道,js组件,多栏目,全屏下拉,下拉菜单,导航条.代码下载地址:http://www.huiyi8.com/sc/26765.html更多请访问 ...

  2. js指定区域全屏

    <html>     <head>         <title>js指定区域全屏</title>         <style>      ...

  3. js设置页面全屏

    html代码 <!-- 全屏按钮 --> <img id="alarm-fullscreen-toggler" src="/public/index/i ...

  4. js 实现浏览器全屏效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. FullPage.js – 轻松实现全屏滚动(单页网站)效果

    FullPage.js 是一个简单而易于使用的插件,用来创建全屏滚动网站(也被称为单页网站).除了可以创建全屏滚动效果以外,也可以给网站添加一些水平的滑块效果.能够自适应不同的屏幕尺寸,包括平板电脑和 ...

  6. 《fullPage.js》创建全屏滚动的网站

    插件介绍 fullPage.js是一个简单易用的插件,创建全屏滚动的网站(也被称为单页网站).它允许全屏滚动创建网站,以及添加内部滑块. 浏览器兼容性 主要功能 支持鼠标滚动 支持前进后退和键盘控制 ...

  7. H5中用js让页面全屏

    概述 意外的发现一个网页有一个按钮能使网页全屏,查了下代码发现是H5的全屏api,于是就查了下资料,记录下来供以后开发时参考,相信对其他人也有用. 参考资料: 利用js如何做到让页面全屏和不全屏功能 ...

  8. js控制浏览器全屏

    HTML 5中的full screen,目前可以在除IE和opera外的浏览器中使用 ,有的时候用来做全屏API,游戏呀,等都很有用.先看常见的API element.requestFullScree ...

  9. 学习笔记: js插件 —— fullPage.js (页面全屏滚动)

    fullPage.js (页面全屏滚动) 必须依赖 jquery-ui.min.js,   233K 14760个星. 以后有时间再看. API挺全 https://github.com/alvaro ...

随机推荐

  1. css 选择器;盒模型

    一.引入方式:(1)CSS 层叠样式表 作用:修饰网页结构 (2)css的三种引入方式 - 行内样式 注意:行内样式的优先级是最高的 - 内接样式 - 外接样式 二.css选择器 基础选择器 * 通配 ...

  2. Java基础笔记(十九)——抽象类abstract

    抽象类作为父类,不能实例化自己类型的对象,但可以通过向上转型实例化子类对象. public abstract class Animal{  } 比如eat(); ,每个动物子类都应有自己的方法,那An ...

  3. Could not instantiate bean class [org.springframework.data.mongodb.core.MongoTemplate]

    org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'repositoryDa ...

  4. EA添加流程图

  5. Dell N5010 Win7下 玩CS全屏(1366*768)问题

    在Dell N5010 Win7 下完CS1.6 全屏不了,以下是解决办法 1.按windows+r键打开 运行 窗口,输入regedit,打开注册表 2.依次点开 HKEY_LOCAL_MACHIN ...

  6. 关于dubbo服务的xml配置文件报错的问题——The matching wildcard is strict, but no declaration can be found for element 'dubbo:application'

    在配置dubbo服务的过程中,经常会遇到虽然程序能够跑起来,但是配置文件一堆红叉,虽然不影响功能,但是确实很让人恶心. 报错信息如下: 解决方案: 下载一个dubbo.xsd文件(就在dubbo.ja ...

  7. windows 常用 命令

    Hyper-v管理               virtmgmt.msc 网络                         ncpa.cpl windows 远程登陆    mstsc.cpl C ...

  8. Codeforces Round #334(div.2) A

    A. Uncowed Forces time limit per test 1 second memory limit per test 256 megabytes input standard in ...

  9. 制作网页logo

    一.先把jpg.png.jpeg等图片通过在线ico图标制作软件变成.ico图片 在线制作ico图标工具: http://www.bitbug.net/ 二.在head里面添加如下代码 <lin ...

  10. newSingleThreadExecutor单任务线程池使用

    1.newSingleThreadExecutor单任务线程池,   一次只执行一个任务 package ThreadTest; import java.util.concurrent.Executo ...