如何在我的 webapp 中的某些页面上全屏显示答案

【问题标题】：How to get full screen on certain pages in my webapp如何在我的 webapp 中的某些页面上全屏显示
【发布时间】：2018-09-06 16:37:10
【问题描述】：

在我的应用程序中，我想让一些页面全屏显示。基本上这就是我想要的： “用户无法使用鼠标访问浏览器或计算机桌面或在窗口外执行任何其他操作”。

我试图使用这个全屏 API： https://www.npmjs.com/package/screenfull

我正在使用 html5/angular 5。我在 API 页面上的 angular 示例中提出了类似建议的指令。例如，我在第 3 页上使用了带有按钮（转到下一页）的选择器“toggleFullscreen”。如果我想在第 4 页和第 5 页上全屏显示。比将选择器放在第 3 页上的下一个按钮带我到第 4 页应该使全屏显示在第 4 页。但它不起作用。第 4 页未全屏显示。

我对 Angular 还是很陌生。那么有人可以提出其他方法来在我的代码中实现此功能吗？我不明白为什么这个 API 不适合我。

【问题讨论】：

您是否要求锁定用户除了使用您的应用程序之外什么都不做？这会很糟糕，原因有很多，而且不可能。
是的，这就是我想要做的。我没有设置要求。我被告知要像这样实现这个功能。
如果他们允许的话，那就太危险了。在您支付赎金之前，某人的网页可能会锁定计算机或设备。

标签： angular html typescript fullscreen html5-fullscreen

【解决方案1】：

toggleFullScreen() {
        let elem =  document.body; 
        let methodToBeInvoked = elem.requestFullscreen || 
         elem.webkitRequestFullScreen || elem['mozRequestFullscreen'] 
         || 
         elem['msRequestFullscreen']; 
        if(methodToBeInvoked) methodToBeInvoked.call(elem);

    }

在任何你想触发全屏的地方调用这个函数，例如在提交按钮点击调用这个方法，它将全屏加载页面

【讨论】：

该函数在我的代码中没有给出任何错误。我想在这个按钮上调用它：。但它仍然没有在点击按钮时全屏显示。
你能创建一个 stackbiltz 的例子，这样我就可以处理它了