以全屏模式打开网址答案

【问题标题】：Open a url in full screen mode以全屏模式打开网址
【发布时间】：2019-11-29 21:18:20
【问题描述】：

我正在尝试通过单击按钮以全屏方式打开 URl，我正在使用以下代码。窗口确实会全屏打开，但在 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();">

我什至尝试过从同一个域打开页面，即使这似乎不起作用。

【问题讨论】：

标签： javascript jquery fullscreen

【解决方案1】：

首先，我建议使用“screenfull”来避免使用样板 JavaScript：https://github.com/sindresorhus/screenfull.js/

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

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

其次，据我所知，您无法解决此问题。浏览器向用户请求许可以全屏打开特别是该页面，正如您所说，这确实有效。

当您使用 window.location 时，您会“导航离开”该页面以及附加的全屏权限。

【讨论】：

我认为它现在已被弃用，

【解决方案2】：

来自控制台日志：

requestFullscreen() 在不安全的来源上已弃用，并且将来会删除支持。您应该考虑将应用程序切换到安全源，例如 HTTPS。有关详细信息，请参阅https://goo.gl/rStTGz。 (index):1 拒绝在框架中显示“https://www.google.com/?gws_rd=ssl”，因为它将“X-Frame-Options”设置为“SAMEORIGIN”。

来自以上网址：

测试已弃用的强大功能

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

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

底线

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

【讨论】：

【解决方案3】：

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

【讨论】：