js全屏（h5全屏api：requestFullscreen）

最新推荐文章于 2025-03-18 08:07:52 发布

goengjin

最新推荐文章于 2025-03-18 08:07:52 发布

阅读量561

点赞数

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/qq_41417772/article/details/110039523

版权

javascript 专栏收录该内容

11 篇文章

订阅专栏

前提： iframe嵌套页面
一.判断是否全屏

   /**
     * [isFullscreen 判断浏览器是否全屏]
     * @return [全屏则返回当前调用全屏的元素,不全屏返回false]
     */
    function isFullscreen(){
        let doc = window.top ? window.top.document :document
        return doc.fullscreenElement    ||
               doc.msFullscreenElement  ||
               doc.mozFullScreenElement ||
               doc.webkitFullscreenElement || false;
    }

window.top ：返回最顶层的窗口对象
window.top.document ：返回最顶层的窗口对象的document对象

二.设置全屏

    /**
     * [setFullscreen 设置全屏]
     * @param {domElement} el[DOM节点对象(可选)]
     */
    function setFullscreen() {
        let el = window.top ? window.top.document.documentElement : document.documentElement;
        let rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen;
         try {
           if (typeof rfs !== "undefined" && rfs) {
                rfs.call(el);
           }} catch ( e ) {
                  console.log(e);
                }
        return;
    }

三.退出全屏

function exitScreen () {
    let el = window.top ? window.top.document : document;
    if (el.exitFullscreen) {
        el.exitFullscreen();
    }
    else if (el.mozCancelFullScreen) {
        el.mozCancelFullScreen();
    }
    else if (el.webkitCancelFullScreen) {
        el.webkitCancelFullScreen();
    }
    else if (el.msExitFullscreen) {
        el.msExitFullscreen();
    }
};