当用户按下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. Build SSH for Development on Windows Subsystem for Linux

    It seems that Windows Subsystem for Linux (WSL) is getting much more mature than the time when it fi ...

  2. [转载]pytorch自定义数据集

    为什么要定义Datasets: PyTorch提供了一个工具函数torch.utils.data.DataLoader.通过这个类,我们在准备mini-batch的时候可以多线程并行处理,这样可以加快 ...

  3. org.json里实现XML和JSON之间对象互转

    org.json包里有一个类org.json.XML可以实现XML和JSON之间的转换.http://www.json.org/javadoc/org/json/XML.html JSONObject ...

  4. void类型指针的基本用法

    void作为指针时可以用任意类型的的指针值都可以给它进行赋值和传递,但是输出时必须时显性输出 代码如下: #include<cstdio> #include<iostream> ...

  5. Flask&&人工智能AI --5 Flask-session、WTForms、数据库连接池、Websocket

    未完待续.... DButils 什么是数据库连接池 数据库连接池负责分配.管理和释放数据库连接,它允许应用程序重复使用一个现有的数据库连接,而不是再重新建立一个:释放空闲时间超过最大空闲时间的数据库 ...

  6. JS匿名函数以及arguments.callee的调用

    var res = (function (n) {    if( n>1 ) {        return n + arguments.callee( n-1 );    } else {   ...

  7. SHA_1计算消息摘要

    /** * SHA_1计算消息摘要 * @param bytes 待计算数据 * @return */ public static String SHA_1(byte[] bytes) { Strin ...

  8. 在Pycharm上编写WordCount程序

    本篇博客将给大家介绍怎么在PyCharm上编写运行WordCount程序. 第一步 下载安装PyCharm 下载Pycharm PyCharm的下载地址(Linux版本).下载完成后你将得到一个名叫: ...

  9. 转 关于bootstrap--表格(table的各种样式)

    https://www.cnblogs.com/shark1100913/p/5627233.html 关于bootstrap--表格(table的各种样式)   1.table-striped:斑马 ...

  10. Oracle 配置监听和本地网络服务

    一.配置监听 在oracle的配置和移植工具中打开Net Configuration Assistant,然后点击下一步. 点击下一步,然后输入监听的名称点击下一步 点击下一步后如图 点击下一步如图 ...