problem:因屏幕或文本域等太小，想擴(kuò)大屏幕（全屏）
solve:
//先封裝好方法
//進(jìn)行切換
var fullScreenClickCount=0;
//調(diào)用各個(gè)瀏覽器提供的全屏方法
var handleFullScreen = function () {
var de = document.documentElement;
if (de.requestFullscreen) {
de.requestFullscreen();
} else if (de.mozRequestFullScreen) {
de.mozRequestFullScreen();
} else if (de.webkitRequestFullScreen) {
de.webkitRequestFullScreen();
} else if (de.msRequestFullscreen) {
de.msRequestFullscreen();
}
else {
wtx.info("當(dāng)前瀏覽器不支持全屏！");
}
};
//調(diào)用各個(gè)瀏覽器提供的退出全屏方法
var exitFullscreen=function() {
if(document.exitFullscreen) {
document.exitFullscreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
//獲取.fullscreen樣式（選擇器）的點(diǎn)擊事件，再該事件中調(diào)用已封裝好的方法
$(".fullscreen").click(function () {
if (fullScreenClickCount % 2 == 0) {
handleFullScreen();
} else {
exitFullscreen();
}
fullScreenClickCount++;
});
//這里僅用一個(gè)樣式實(shí)現(xiàn)切換全屏退屏，關(guān)鍵點(diǎn)是判斷瀏覽器實(shí)現(xiàn)全屏退屏的方法
完整的例子如下:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>fullscreen test</title>
</head>
<body>
<button class="fullscreen" value="全屏按鈕">全屏按鈕</button>
</body>
<!-- 導(dǎo)入jquery插件 -->
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
//進(jìn)行切換
var fullScreenClickCount=0;
//調(diào)用各個(gè)瀏覽器提供的全屏方法
var handleFullScreen = function () {
var de = document.documentElement;
if (de.requestFullscreen) {
de.requestFullscreen();
} else if (de.mozRequestFullScreen) {
de.mozRequestFullScreen();
} else if (de.webkitRequestFullScreen) {
de.webkitRequestFullScreen();
} else if (de.msRequestFullscreen) {
de.msRequestFullscreen();
}
else {
wtx.info("當(dāng)前瀏覽器不支持全屏！");
}
};
//調(diào)用各個(gè)瀏覽器提供的退出全屏方法
var exitFullscreen=function() {
if(document.exitFullscreen) {
document.exitFullscreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
$(".fullscreen").click(function () {
if (fullScreenClickCount % 2 == 0) {
handleFullScreen();
} else {
exitFullscreen();
}
fullScreenClickCount++;
});
</script>
</html>
————————————————
放大前.png
放大后.png
原文鏈接：https://blog.csdn.net/weixin_43467066/article/details/88977608
