js实现窗口全屏示例详解
更新时间：2019年09月17日 16:57:52 作者：vcxiaohan2
这篇文章主要为大家详细介绍了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)
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了如何利用jsPDF实现将图片转为pdf的功能，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起了解一下2023-08-08
javascript来定义类的规范，有利于代码的可阅读性。2010-11-11
这篇文章主要介绍了微信小程序全局变量GLOBALDATA的定义和调用过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-09-09
本文主要介绍了typescript返回值类型和参数类型的具体使用文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-06-06
JS中的public和private对象,即static修饰符
先看下面的例子,它将告诉我们在JS世界中也有C#里的public , private ,及static等2012-01-01
这篇文章主要介绍了JavaScript实现创建自定义对象的常用方式,结合实例形式总结分析了JavaScript工厂模式、构造函数模式、原型模式、组合模式等常用的自定义对象创建模式操作与使用技巧,需要的朋友可以参考下2018-07-07
这篇文章主要介绍了原生JS 实现的input输入时表格过滤操作,结合实例形式分析了JavaScript基于页面元素遍历、运算、判断实现的表格过滤相关操作技巧,需要的朋友可以参考下2019-08-08
Webpack打包css后z-index被重新计算的解决方法
这篇文章主要跟大家分享了Webpack打包css后z-index被重新计算的解决方法，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编一起来学习学习吧。2017-06-06
在实际的开发工作过程中，积累了一些常见又超级好用的 Javascript 技巧和代码片段，包括整理的其他大神的 JS 使用技巧，今天筛选了 9 个，以供大家参考2023-04-04
这篇文章主要介绍了微信小程序在text文本实现多种字体样式,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-11-11
最新评论