js实现窗口全屏示例详解
时间:2019-09-18
本文章向大家介绍js实现窗口全屏示例详解,主要包括js实现窗口全屏示例详解使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
前言
该 demo 包含全屏事件、退出全屏事件以及屏幕状态改变的钩子函数的封装
以下是一个完整示例,只需整体拷贝下来运行即可(注意引入了 jquery)
请在这里查看示例☞ fullscreen示例
示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <script src="js/jquery-1.11.3.min.js"></script> <style> * { margin: 0; padding: 0; } /* 窗口全屏样式 */ html:-moz-full-screen { background: grey; } html:-webkit-full-screen { background: grey; } html:fullscreen { background: grey; } div { width: 100px; height: 100px; background: blue; } img { width: 80px; height: 80px; } </style> </head> <body> <button class="win-fullscreen">窗口全屏</button> <button class="div-fullscreen">div全屏</button> <button class="img-fullscreen">img全屏</button> <button class="exit-fullscreen">退出全屏</button> <div class="div"> <img class="img" src="images/a.png"> </div> </body> <script> /* 调用示例 */ // 窗口全屏 $('.win-fullscreen').on('click', function() { requestFullScreen(document.documentElement); }); // div全屏 $('.div-fullscreen').on('click', function() { requestFullScreen($('.div')[0]); }); // img全屏 $('.img-fullscreen').on('click', function() { requestFullScreen($('.img')[0]); }); // 退出全屏 $('.exit-fullscreen').on('click', function() { exitFull(); }); // 窗口状态改变事件 fullscreenchange(document, function(isFull) { console.log(isFull); }); /* 封装 */ // 窗口状态改变 function fullscreenchange(el, callback) { el.addEventListener("fullscreenchange", function () { callback && callback(document.fullscreen); }); el.addEventListener("webkitfullscreenchange", function () { callback && callback(document.webkitIsFullScreen); }); el.addEventListener("mozfullscreenchange", function () { callback && callback(document.mozFullScreen); }); el.addEventListener("msfullscreenchange", function () { callback && callback(document.msFullscreenElement); }); } // 全屏 function requestFullScreen(element) { var requestMethod = element.requestFullScreen || //W3C element.webkitRequestFullScreen || //Chrome等 element.mozRequestFullScreen || //FireFox element.msRequestFullScreen; //IE11 if (requestMethod) { requestMethod.call(element); }else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer var wscript = new ActiveXObject("WScript.Shell"); if (wscript !== null) { wscript.SendKeys("{F11}"); } } } //退出全屏 function exitFull() { var exitMethod = document.exitFullscreen || //W3C document.mozCancelFullScreen || //Chrome等 document.webkitExitFullscreen || //FireFox document.webkitExitFullscreen; //IE11 if (exitMethod) { exitMethod.call(document); }else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer var wscript = new ActiveXObject("WScript.Shell"); if (wscript !== null) { wscript.SendKeys("{F11}"); } } } </script> </html>
参考文章
Native Fullscreen JavaScript API (plus jQuery plugin)
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- 黑帽SEO剖析之隐身篇
- Java中如何判断一个字符串是Java代码还是英文呢?
- 将复杂查询写到SQL配置文件--SOD框架的SQL-MAP技术简介
- Java中实现找到两个数组交集的2种方法,开发实用
- Java Web中JSP的include 指令知识点总结——每日一语法学习
- Java反序列化漏洞从理解到实践
- ORM查询语言(OQL)简介--高级篇(续):庐山真貌
- Java中使用Hibernate系列之映射关联启动工作学习(第五节)
- Java中使用Hibernate系列之单向Set-based的关联学习(第四节)
- Java中使用Hibernate系列之加载并存储对象学习(第三节)
- Java中使用Hibernate系列之启动方法学习(第二节)
- Java中使用Hibernate系列之映射文件学习(第一节)
- Java中为图片添加水印效果的方法——实例代码
- Java中使用Hibernate系列之过滤器(filters)学习
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- openstack架构解析
- Linux服务器基础网络配置
- 负载均衡集群介绍,LVS介绍,LVS的调度算法,LVS的NAT模式搭建
- 03 实战 Ansible-Playbook之初始化服务器
- Dubbo与Zookeeper,SpringMVC整合和使用
- Docker安全之用户资源隔离
- kubernetes(六) 基于kubeadm构建高可用k8s集群
- docker存储驱动知识归纳总结
- 未来已来——如何在VR游戏中实现3D语音
- kubernetes(五)之Dockerfile
- kubernetes(四)之Docker存储卷
- 使用卷积神经网络构建图像分类模型检测肺炎
- 如何提升docker容器安全性
- CICD(三)Ansible常用模块以及案例
- 深入SVM:支持向量机核的作用是什么