以全屏模式打开url

Question

我正在尝试通过单击按钮以全屏方式打开 URl，我正在使用以下代码。 window 确实打开了全屏，但随后在 URL 重新加载时又回到了原始屏幕大小，

<script type="text/javascript">

function toggleFullScreen() 
{
    if ((document.fullScreenElement && document.fullScreenElement !== null) || (!document.mozFullScreen && !document.webkitIsFullScreen)) 
    {
        if (document.documentElement.requestFullScreen) {  
          document.documentElement.requestFullScreen();  
        } else if (document.documentElement.mozRequestFullScreen) {  
            document.documentElement.mozRequestFullScreen();  
        } else if (document.documentElement.webkitRequestFullScreen) {  
            document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);  
        }  
    } 
    else 
    {  
        if (document.cancelFullScreen) {  
            document.cancelFullScreen();  
        } else if (document.mozCancelFullScreen) {  
            document.mozCancelFullScreen();  
        } else if (document.webkitCancelFullScreen) {  
            document.webkitCancelFullScreen();  
        }    
    }  
    window.location.href = "http://google.com/";    
}



</script>

<input type="button" value="click to toggle fullscreen" onclick="toggleFullScreen();">

我什至尝试过从同一个域打开页面，即使那样似乎也行不通。

Answer 1

来自控制台日志：

requestFullscreen() is deprecated on insecure origins, and support will be removed in the future. You should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details. (index):1 Refused to display 'https://www.google.com/?gws_rd=ssl' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

从上面URL：

测试已弃用的强大功能

在某项功能被弃用后，如果您是一名开发人员，需要在没有有效证书的服务器上继续测试某项功能，您有两个选择：

localhost 被视为 HTTP 上的安全来源，因此如果您能够从 localhost 运行您的服务器，您应该能够测试该服务器上的功能。
您可以运行 chrome 使用 --unsafely-treat-insecure-origin-as-secure="example.com" 标志（将 "example.com" 替换为您的来源actually want to test)，这将把该来源视为本次会话的安全来源。请注意，您还需要包含 --user-data-dir=/test/only/profile/dir 以创建新的测试配置文件以使该标志起作用。

底线

它仅适用于安全服务器，例如 HTTPS。为了保持打开状态，新的 URL 必须设置正确的 X-Frame-Options。

Answer 2

首先，我建议使用 "screenfull" 以避免样板文件 JavaScript 你有：https://github.com/sindresorhus/screenfull.js/

它将自己暴露在 window 对象上，所以就这么简单：

if (screenfull.enabled) {
    screenfull.request();
}

其次，据我所知，你无法解决这个问题。浏览器请求用户允许以全屏方式打开特定页面，正如您所说，这确实有效。

当您使用 window.location 时，您 "navigate away" 来自该页面并获得全屏权限。

Answer 3

您可以创建一个包含 URL 的 iframe 并在其上使用 requestFullscreen :)

以全屏模式打开url

Open a url in full screen mode

javascript

jquery

fullscreen