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)
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
很少使用javascript的delete，最近因为一个小bug发现删除引用类型对象的时候有一点不同2013-11-11
这篇文章主要为大家详细介绍了JS实现电子时钟入门操作，实现带有表盘的时钟，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-06-06
下面小编就为大家带来一篇浅谈JavaScript中小数和大整数的精度丢失。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
这篇文章主要介绍了JS面试题大坑之隐式类型转换实例代码,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-10-10
指定js可访问其它域名的cookie的方法...2007-09-09
这篇文章主要介绍了JS查找孩子节点,结合完整实例形式分析了javascript节点遍历、查找相关操作技巧,需要的朋友可以参考下2019-07-07
JavaScript 数据响应是一种重要的前端开发概念,是指在应用程序中的数据发生变化时,能够自动更新与这些数据相关的用户界面（UI）部分的能力,本文我们来总结一下目前可以简单实现 JavaScript 中的数据响应的方法,需要的朋友可以参考下2023-09-09
js实现Element中input组件的部分功能并封装成组件(实例代码)
这篇文章主要介绍了纯生js实现Element中input组件的部分功能（慢慢完善）并封装成组件,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-03-03
这篇文章主要为大家详细介绍了原生js实现下拉刷新和上拉加载更多，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-01-01
这篇文章主要是对解决IE低版本不支持call与apply的问题进行了详细的介绍。需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
最新评论