Question

我试图在点击按钮时全屏打开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();">

我甚至尝试过来自同一个域的打开页面，即使这看起来不起作用。

Answer 1

从控制台日志：

requestFullscreen（）在不安全的来源上已弃用，将来会删除支持。您应该考虑将应用程序切换到安全的来源，例如HTTPS。有关详细信息，请参阅https://goo.gl/rStTGz。（索引）：1拒绝显示＆＃39; https://www.google.com/?gws_rd=ssl＆＃39;在一个框架中因为它设置了X-Frame-Options＆＃39;到＆＃39; SAMEORIGIN＆＃39;。

来自上述网址：

测试弃用的强大功能

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

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

底线

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

Answer 2

首先，我建议使用＆＃34; screenfull＆＃34;要避免使用样板JavaScript：https://github.com/sindresorhus/screenfull.js/

它会在window对象上暴露自己，所以它就像这样容易：

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

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

当您使用window.location时，您将离开＆＃34;从该页面和附加的全屏权限。

Answer 3

您可以创建一个包含网址的iframe，并在其上使用requestFullscreen：）

以全屏模式打开网址

3 个答案: