Question

我希望实现与 F11 键完全相同的行为。当我们在Windows中按 F11 键时，整个浏览器全屏显示（所有打开的标签页）。

我该怎么做才能使用JavaScript或ActionScript。

我已经尝试了element.requestFullScreen()。但我不是在谈论这个。使用element.requestFullScreen()对我没用，因为按 Esc 会退出全屏而我不想这样。

Answer 1

这个帖子已经解决了：How to make the window full screen with Javascript (stretching all over the screen)

function maxWindow() {
    window.moveTo(0, 0);


    if (document.all) {
        top.window.resizeTo(screen.availWidth, screen.availHeight);
    }

    else if (document.layers || document.getElementById) {
        if (top.window.outerHeight < screen.availHeight || top.window.outerWidth < screen.availWidth) {
            top.window.outerHeight = screen.availHeight;
            top.window.outerWidth = screen.availWidth;
        }
    }
}

最新的解决方案，也发布在那里。只需修改它即可将其应用到您需要的地方。这将打开一个新窗口：

<script>
    var popupScreenParameters = [ 'height='+screen.height, 'width='+screen.width, 'fullscreen=yes' ].join(',');
    var windowVariable = window.open('popupUrl',"popupName",popupScreenParameters); windowVariable .moveTo(0,0);
</script>

Answer 2

您可以使用原生全屏api，这是一个示例。（请创建一个HTML文件，以便将其视为粘贴在iframe中的代码，就像jsfiddle全屏模式一样，不会显示）。

API：

Element.requestFullscreen()

Document.exitFullscreen()

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>HTML5 Full-Screen</title>
<style>
* {
    padding: 0;
    margin: 0;
}

html, body
{
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

body {
    margin: 10px;
}

p {
    margin: 0 0 1em 0;
}

figure {
    position: relative;
    display: block;
    width: 30%;
    float: right;
    padding: 0;
    margin: 1em;
    cursor: pointer;
}

figure img {
    display: block;
    max-width: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    cursor: pointer;
}

figure:-moz-full-screen img {
    position: fixed;
}

figure:-ms-fullscreen {
    width: auto;
}

figure:-ms-fullscreen img {
    position: fixed;
}

figure:fullscreen img {
    position: fixed;
}
</style>
</head>
<body>

<header>
<h1>Full-Screen Demonstration</h1>
</header>

<article>

<figure id="myimage">
<img src="http://dummyimage.com/600x400/000/fff" />
</figure>


<p>Click on image to go full screen</p>

</article>

<script>


if (
    document.fullscreenEnabled || 
    document.webkitFullscreenEnabled || 
    document.mozFullScreenEnabled ||
    document.msFullscreenEnabled
) {

    var i = document.getElementById("myimage");

    i.onclick = function() {

        // in full-screen?
        if (
            document.fullscreenElement ||
            document.webkitFullscreenElement ||
            document.mozFullScreenElement ||
            document.msFullscreenElement
        ) {

            // exit full-screen
            if (document.exitFullscreen) {
                document.exitFullscreen();
            } else if (document.webkitExitFullscreen) {
                document.webkitExitFullscreen();
            } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            } else if (document.msExitFullscreen) {
                document.msExitFullscreen();
            }

        }
        else {

            // go full-screen
            if (i.requestFullscreen) {
                this.requestFullscreen();
            } else if (i.webkitRequestFullscreen) {
                i.webkitRequestFullscreen();
            } else if (i.mozRequestFullScreen) {
                i.mozRequestFullScreen();
            } else if (i.msRequestFullscreen) {
                i.msRequestFullscreen();
            }

        }

    }

}
</script>

</body>
</html>

如何使用java脚本或动作脚本制作浏览器全屏（与F11相同）？

2 个答案: