jquery 在浏览器中退出全屏的按钮不更新

7nbnzgx9  于 9个月前  发布在  jQuery
关注(0)|答案(3)|浏览(80)

我实现了一些全屏功能为我目前的项目,这里是脚本:

jQuery(document).ready(function ($) {

    $(".full-screen-btn").bind("click", function () {
        launchIntoFullscreen(document.getElementById("main-container"));
        showExitFullScreenButton();
    });

    document.addEventListener("fullscreenchange", checkIfFullScreen);
    document.addEventListener("webkitfullscreenchange", checkIfFullScreen);
    document.addEventListener("mozfullscreenchange", checkIfFullScreen);
    document.addEventListener("MSFullscreenChange", checkIfFullScreen);

    function showFullScreenButton() {
        $(".exit-full-screen-btn").addClass("full-screen-btn");
        $(".exit-full-screen-btn").unbind('click')
        $(".full-screen-btn").removeClass("exit-full-screen-btn");
        $(".full-screen-btn").attr("value", "Full Screen");
        $(".full-screen-btn").bind("click", function () {
            launchIntoFullscreen(document.getElementById("main-container"));
            showExitFullScreenButton();
        });
    }

    function showExitFullScreenButton() {
        $(".full-screen-btn").addClass("exit-full-screen-btn");
        $(".full-screen-btn").unbind('click')
        $(".exit-full-screen-btn").removeClass("full-screen-btn");
        $(".exit-full-screen-btn").attr("value", "Exit");
        $(".exit-full-screen-btn").bind("click", function () {
            exitFullscreen();
            showFullScreenButton();
        });
    }

    function checkIfFullScreen() {
        if ($(".full-screen-btn").length) {
            showFullScreenButton();
        } else {
            showExitFullScreenButton();
        }
    }

    // Find the right method, call on correct element
    function launchIntoFullscreen(element) {
        if (element.requestFullscreen) {
            element.requestFullscreen();
        } else if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
        } else if (element.webkitRequestFullscreen) {
            element.webkitRequestFullscreen();
        } else if (element.msRequestFullscreen) {
            element.msRequestFullscreen();
        }
    }

    // Close fullscreen
    function exitFullscreen() {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        }
    }
});

字符串
一切都工作正常,除了当用户使用浏览器功能退出全屏(如f11和键盘中的ESC按钮),这不会更新我的退出按钮再次成为全屏按钮(我已经看到全屏和最小化按钮在Youtube和最小化按钮更新,即使用户使用浏览器功能退出全屏)。你们能帮助我吗?谢谢。
这是正在被替换的html输入按钮:

<input type="button" value="Full Screen" class="full-screen-btn"/>

fjnneemd

fjnneemd1#

不确定,但我认为你应该这样做:

function exitFullscreen() {

    showFullScreenButton(); // THIS IS MY EDIT

    if (document.exitFullscreen) {
        document.exitFullscreen();
    } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
    }
}

字符串

1rhkuytd

1rhkuytd2#

我通过使用JavaScript中的keyup Event找到了答案:

function checkIfFullScreen() {
    if ($(".full-screen-btn").length) {
        showFullScreenButton();
    } else {

        showExitFullScreenButton();
    }

    // check if f11 or ESC button was pressed
    $(document).keyup(function (e) {
        if (e.which == 122 || e.which == 27) {
            e.preventDefault();
            showFullScreenButton();
        }
    });
}

字符串

ao218c7q

ao218c7q3#

只需使用fullscreenchange事件即可。

document.addEventListener("fullscreenchange", () => {
  if (document.fullscreen) {
    showExitFullScreenButton();
  } else {
    showFullScreenButton();
  }
});

字符串

相关问题