前端开发中，实现类似于F11键的网页全屏功能(可对指定元素全屏)
本帖最后由 pilot34 于 2022-12-7 15:22 编辑前端开发中，实现类似于F11键的网页全屏功能(可对指定元素全屏)
使用全屏API实现网页类似于F11的全屏功能，目前在Firefox、谷歌Chrome、Safari、Opera和IE 11+中实现。
话不多说，直接上代码。
一、首先在js部分封装触发全屏、取消全屏的方法
// 全屏功能类似于网页F11键
// 设置全屏 elementId参数为指定要全屏的某个元素的id 无参数时默认网页全屏
//设置全屏
function setFullScreen(elementId) {
let docElm = null;
if (elementId) {
docElm = document.getElementById(elementId);
} else {
docElm = document.documentElement;
}
//Chrome等
if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
//W3C
else if (docElm.requestFullscreen) {
docElm.requestFullscreen();
}
//IE11
else if (docElm.msRequestFullscreen) {
docElm = document.body; //overwrite the element (for IE)
docElm.msRequestFullscreen();
}
//FireFox
else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
}
//取消全屏，按esc也可以取消全屏
function closeFullScreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
}
else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
// 监听全屏状态
var fullscreenState = document.getElementById("fullscreen-state");
if (fullscreenState) {
document.addEventListener("fullscreenchange", function () {
fullscreenState.innerHTML = (document.fullscreenElement) ? "" : "not ";
}, false);
document.addEventListener("msfullscreenchange", function () {
fullscreenState.innerHTML = (document.msFullscreenElement) ? "" : "not ";
}, false);
document.addEventListener("mozfullscreenchange", function () {
fullscreenState.innerHTML = (document.mozFullScreen) ? "" : "not ";
}, false);
document.addEventListener("webkitfullscreenchange", function () {
fullscreenState.innerHTML = (document.webkitIsFullScreen) ? "" : "not ";
}, false);
}}
二、其次在html部分编写绑定DOM，demo如下：
<p>
<button id="view-fullscreen">全屏</button>
<button id="cancel-fullscreen">取消全屏</button>
</p>
<p>全屏状态: 现在是 <b id="fullscreen-state"> not </b> 全屏</p>
<h2>指定某个元素全屏</h2>
<p>可以使指定的某个元素全屏，例如：一段例子视频：</p>
<video id="mario-video" controls width="320">
<source src="http://video.699pic.com/videos/64/15/10/zRNBGCCm9wh41526641511_10s.mp4">
</video>
<p>
<button id="video-fullscreen">视频全屏</button>
</p>
html代码块有部分跟传上去的源代码有点不一样，按钮的点击事件没给放上去，应该是帖子的html代码快编辑部分只能写html，嵌入的js点击事件自动给屏蔽了。
这里自己看着js部分的方法函数给对应按钮绑定一下点击事件就OK了。
三、最后
最后，效果图片就不放了，全屏的图也不好展示，因为展示不出来啥，感兴趣的朋友自己去实践尝试一下全屏的实现，体验会更好吧。
好啦，记录完毕。
如有不当之处，请指正，共同进步。
页:
[1]