JS全屏事件 模拟键盘事件F11 兼容IE
方法1:
// 全屏 //el为全屏对象
fullScreen(el) {
var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen,
wscript;
if (typeof rfs != "undefined" && rfs) {
rfs.call(el);
return;
}
if (typeof window.ActiveXObject != "undefined") {
wscript = new ActiveXObject("WScript.Shell");
if (wscript) {
wscript.SendKeys("{F11}");
}
}
},
// 退出全屏
exitFullScreen(el) {
var el = document,
cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.mozCancelFullScreen || el.exitFullScreen,
wscript;
if (typeof cfs != "undefined" && cfs) {
cfs.call(el);
return;
}
if (typeof window.ActiveXObject != "undefined") {
wscript = new ActiveXObject("WScript.Shell");
if (wscript != null) {
wscript.SendKeys("{F11}");
}
}
}
调用
// 全屏
fullScreen(app);
// 退出全屏
exitFullScreen();
方法2:
//全屏
var docElm = document.documentElement;
//W3C
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
}
//FireFox
else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
//Chrome等
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
//IE11
else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
}
// 退出全屏
//W3C
if (document.exitFullscreen) {
document.exitFullscreen();
}
//FireFox
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
//Chrome等
else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
data.name = '全屏'
}
//IE11
else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
我碰到的问题:刚开始调用是if 全屏 if 退出全屏,这里if判断的失误导致点击全屏后文字马上由变成了退出全屏变成全屏,但是vue很handleClick很奇怪的是只执行了 data.name = '全屏',但是没有执行 me.exitFullScreen();
到了IE里面两句话就都执行了,然后我错误的以为这里的全屏未生效,其实是执行完全屏后马上退出全屏了
最终代码 全屏退出全屏方法(兼容IE)
// 全屏 //el为全屏对象 // 判断各种浏览器,找到正确的方法
launchFullScreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen(); return true
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen(); return true
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen(); return true
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen(); return true
}
},
// 退出全屏
exitFullScreen(el) {
if (document.exitFullscreen) {
document.exitFullscreen(); return true
} else if (document.msExitFullscreen) {
document.msExitFullscreen(); return true
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen(); return true
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen(); return true
}
},
调用
// 全屏
if (data.name == '全屏') {
// 启动全屏!
me.launchFullScreen(document.documentElement);
data.name = '退出全屏'
} else if (data.name == '退出全屏') {
me.exitFullScreen();
data.name = '全屏'
}
JS全屏事件 模拟键盘事件F11 兼容IE的更多相关文章
- 初识 jquery.simulate.js 模拟键盘事件
用jquery 和 jquery.simulate.js 实现模拟键盘事件,点击上下左右div相当于点击键盘的上下左右键 <!DOCTYPE html> <html> < ...
- JS模拟键盘事件 -- 原理及小例子
提问: 键盘默认事件,比如tab切换,alt+f4关闭,ctrl+t新建等,如果不想通过键盘而是一些按钮点击来触发这些功能,该咋办呢? 例子: 先以tab为例上一个小例子: <!DOCTYPE ...
- JavaScript 模拟键盘事件
JavaScript 模拟键盘事件和鼠标事件(比如模拟按下回车等) 2016年09月08日 15:23:25 神秘_博士 阅读数:41158 标签: javascript鼠标键盘事件模拟更多 个人分类 ...
- selenium 模拟键盘事件 复制粘贴、右键、回车等
#coding=utf-8 ''' selenium ''' from selenium import webdriver as wd import time bc=wd.Chrome(executa ...
- Python_Selenium之basepage 识别元素、浏览器操作、获取属性、鼠标事件、键盘事件、弹窗、切换frame、切换句柄等封装
#coding=gbkimport osimport timefrom selenium import webdriverfrom selenium.webdriver.common.by impor ...
- 关于最近在做的一个js全屏轮播插件
最近去面试了,对方要求我在一个星期内用原生的js代码写一个全屏轮播的插件,第一想法就是跟照片轮播很相似,只是照片轮播是有定义一个宽高度大小已经确定了的容器用来存储所有照片,然后将照片全部左浮动,利用m ...
- 前端(十五)—— JavaScript事件:绑定事件方式、事件的冒泡和默认事件、鼠标事件、键盘事件、表单 事件、文档事件、图片事件、页面事件
JS事件:绑定事件方式.事件的冒泡和默认事件.鼠标事件.键盘事件.表单 事件.文档事件.图片事件.页面事件 一.事件的两种绑定方式 1.on事件绑定方式 document.onclick = func ...
- JS全屏漂浮广告、移入光标停止移动
点击这里查看效果 以下是代码: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Ty ...
- [HTML]JS全屏代码
video全屏参考:https://www.thecssninja.com/javascript/fullscreen <!doctype html> <html> <h ...
随机推荐
- Java并发编程之java.util.concurrent包下常见类的使用
一,Condition 一个场景,两个线程数数,同时启动两个线程,线程A数1.2.3,然后线程B数4.5.6,最后线程A数7.8.9,程序结束,这涉及到线程之间的通信. public class Co ...
- scrum例会报告+燃尽图01
此作业要求参见:https://edu.cnblogs.com/campus/nenu/2019fall/homework/9954 一.小组情况 组长:贺敬文组员:彭思雨 王志文 位军营 徐丽君队名 ...
- SpringBoot 2.x 使用Redis作为项目数据缓存
一.添加依赖 <!-- 添加缓存支持 --> <dependency> <groupId>org.springframework.boot</groupId& ...
- 一、基础篇--1.1Java基础-equals与==的区别
==: ==比较的是变量内存中存放的对象的内存地址,用来判断两个对象地址是否相同,比较的是否是同一个对象. 1.两边的操作数必须是同一类型,不然编译不通过. 2.如果是基本数据类型比较,值相等则为tr ...
- leetcode-easy-listnode-234 Palindrome Linked List
mycode 89.42% # Definition for singly-linked list. # class ListNode(object): # def __init__(self, ...
- 利用docker启动 wordpress
网上有很多教程哈,我只是记录自己怎么玩的,没啥教学意义 查看镜像说明的mysql/data目录,方便挂载 [root@docker ~]# docker inspect -f {{.Config.Vo ...
- 【剑指offer37】二叉树的序列化
序列化过程很简单,如果是采用先序序列,那么对先序遍历做出改变即可: 层序遍历建立二叉树,如: 1 2 3 4 # 5 6 输入第一行:将要输入的节点的个数N,如上面的为7 ...
- Electron对JQuery的支持问题
最近在了解Electron框架写应用,偶然发现在html中使用<script src="./jquery.js"></script>这种方式引入JQuery ...
- 请介绍下 adb、ddms、aapt 的作用
adb 是 Android Debug Bridge ,Android 调试桥的意思 ddms 是 Dalvik Debug Monitor Service,dalvik 调试监视服务. aapt 即 ...
- 无法在WEB服务器上启动调试,Web 服务器配置不正确
访问IIS元数据库失败 思考可能是次序出了问题,解决 1.打开CMD,进入 C:\WINDOWS\Microsoft.NET\Framework\v2.0.50727 2.输入 aspnet_regi ...