如何触发整个网站的全屏活动

时间:2019-05-03 07:34:00

标签: html5-fullscreen

如何为整个网站设置全屏选项。

我的代码适用于主页,但是当我们浏览页面时,它再次显示浏览器。

JS代码:

window.jquery(document).ready(function() {

    // f11 key-click event for full screen
    window.jquery(document).keyup(function(e) {
        if (e.which == 122) {
            window.jquery(".start_alert").stop().fadeOut();
        }
    });

});

// Add function for fullscreen

function fullConfirm() {
    window.jquery(".start_alert").stop().fadeOut();

    var el = document.documentElement,
        rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen;

    if (typeof rfs != "undefined" && rfs) {
        rfs.call(el);
    } else if (typeof window.ActiveXObject != "undefined") {
        // for Internet Explorer
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript != null) {
            wscript.SendKeys("{F11}");
        }
    }
}

function fullCancel() {
    window.jquery(".start_alert").stop().fadeOut();
}


//js code
window.jquery(document).ready(function() {

    // f11 key-click event for full screen
    window.jquery(document).keyup(function(e) {
        if (e.which == 122) {
            window.jquery(".start_alert").stop().fadeOut();
        }
    });
});


// Add function for fullscreen

function fullConfirm() {
    window.jquery(".start_alert").stop().fadeOut();

    var el = document.documentElement,
        rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen;

    if (typeof rfs != "undefined" && rfs) {
        rfs.call(el);
    } else if (typeof window.ActiveXObject != "undefined") {
        // for Internet Explorer
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript != null) {
            wscript.SendKeys("{F11}");
        }
    }
}

function fullCancel() {
    window.jquery(".start_alert").stop().fadeOut();
}


// html code
<div class="start_alert">
    <div class="cover"></div>
    <div class="car_modal car_alert " style="display:block;">
        <div class="m_header">
            <strong>Notice</strong>
        </div>
        <div class="m_body">
            <div class="alert_info_txt">
                <p>This screen is designed for a full screen size of 1920x1080.</p>
            </div>
        </div>
        <div class="m_footer">
            <button type="button" class="btn_confirm" onclick="fullConfirm();">
                View full screen</button>
            <button type="button" class="btn_confirm" onClick="fullCancel();">cancel</button>
        </div>
    </div>
</div>

当前我的功能正在主页上运行,但是当我们浏览页面时,它再次显示浏览器。一旦触发全屏选项,直到按 ESC 按钮,我就不需要浏览器窗口了。我怎样才能解决这个问题?

0 个答案:

没有答案