jquery全屏及退出全屏

Astrian 发布于2019-08-23 14:58 / 3477人阅读

摘要：涉及方法请求全屏退出全屏取消全屏监听全屏变化全屏全屏退出全屏通过事件监听退出全屏也可通过来监控全屏变化

涉及方法：

requestFullScreen：请求全屏

exitFullscreen：退出全屏

cancelFullScreen：取消全屏

fullscreenchange：监听全屏变化

html

// 全屏
var $fullScreenEle = $("#js_full_screen"),
    $fsChildEle = $fullScreenEle.children(),
    $navbarEle = $(".zh-navbar"),
    $headerEle = $(".zh-header");
$fullScreenEle.click(function() {
    if($fsChildEle.hasClass("iconfont-full-screen")) { // 全屏
        var docEle = document.documentElement;
        var rfs = docEle.requestFullScreen || docEle.webkitRequestFullScreen || docEle.mozRequestFullScreen || docEle.msRequestFullScreen;
        if (rfs) {
            rfs.call(docEle);
        } else if (typeof window.ActiveXObject !== "undefined") {
            var wscript = new ActiveXObject("WScript.Shell");
            if (wscript != null) {
                wscript.SendKeys("{F11}");
            }
        }
        $fsChildEle.removeClass("iconfont-full-screen").addClass("iconfont-exit-screen");
        $navbarEle.hide();
        $headerEle.css("top", 10);
    } else { // 退出全屏
        var cfs = document.cancelFullScreen || document.webkitCancelFullScreen || document.mozCancelFullScreen || document.exitFullScreen;
        if (cfs) {
            cfs.call(document);
        } else if (typeof window.ActiveXObject !== "undefined") {
            var wscript = new ActiveXObject("WScript.Shell");
            if (wscript != null) {
                wscript.SendKeys("{F11}");
            }
        }
    }
});

// 通过resize事件监听退出全屏
$(window).resize(function() {
    var prevWinHgt = window.sessionStorage.getItem("winHgt");
    if(prevWinHgt) {
        if(window.innerHeight
也可通过fullscreenchange来监控全屏变化
document.addEventListener("fullscreenchange", function(e) {
    console.log("fullscreenchange", e);
});
document.addEventListener("mozfullscreenchange", function(e) {
    console.log("mozfullscreenchange ", e);
});
document.addEventListener("webkitfullscreenchange", function(e) {
    console.log("webkitfullscreenchange", e);
});
document.addEventListener("msfullscreenchange", function(e) {
    console.log("msfullscreenchange", e);
});

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101437.html

Fullscreen API 全屏显示网页

摘要：进入全屏将全屏显示。内核浏览器和表现不同，前者只要求是元素即可，后者则要求必须是文档流中的元素，比较严格，否则不能全屏显示。内核浏览器会阻止除方向键控制键之外的键盘输入，会在输入时发出要求用户退出全屏状态的提示。第一次看到应用 Fullscreen API 全屏显示网页，是 FaceBook 中的照片放大。作为一个比较新的 API，目前只有 Safari、Chrome 和 FireF...

TNFE 2019-08-30 13:07 评论0 收藏0
Fullscreen API 全屏显示网页

摘要：进入全屏将全屏显示。内核浏览器和表现不同，前者只要求是元素即可，后者则要求必须是文档流中的元素，比较严格，否则不能全屏显示。内核浏览器会阻止除方向键控制键之外的键盘输入，会在输入时发出要求用户退出全屏状态的提示。第一次看到应用 Fullscreen API 全屏显示网页，是 FaceBook 中的照片放大。作为一个比较新的 API，目前只有 Safari、Chrome 和 FireF...

zsirfs 2019-08-19 18:35 评论0 收藏0
Fullscreen API 全屏显示网页

摘要：进入全屏将全屏显示。内核浏览器和表现不同，前者只要求是元素即可，后者则要求必须是文档流中的元素，比较严格，否则不能全屏显示。内核浏览器会阻止除方向键控制键之外的键盘输入，会在输入时发出要求用户退出全屏状态的提示。第一次看到应用 Fullscreen API 全屏显示网页，是 FaceBook 中的照片放大。作为一个比较新的 API，目前只有 Safari、Chrome 和 FireF...

wangxinarhat 2019-08-01 15:22 评论0 收藏0
神经病啊！——微信同层播放器接(踩)入(坑)总结

摘要：估计踩过微信视频这个坑的，内心都想说上一句神经病啊而微信也终于出了个同层播放器接入规范，算是正常点了好了闲话不说，下边进入正题标签里的内联播放相关属性微信在标签上新增了一些的私有属性，分别是启用同层播放。估计踩过微信视频这个坑的，内心都想说上一句：神经病啊！而微信也终于出了个《H5同层播放器接入规范》，算是正常点了……好了闲话不说，下边进入正题： 1. 标签里的内联播放相关属性...

wzyplus 2019-08-29 12:17 评论0 收藏0