当浏览器处于全屏模式时，如何禁用所有链接？答案

【问题标题】：How can I disable all links when the browser is in full screen mode?当浏览器处于全屏模式时，如何禁用所有链接？
【发布时间】：2020-06-21 01:17:54
【问题描述】：

当浏览器 (Chrome / IE) 位于 full-screen mode 时，我如何禁用所有链接？

因为当用户点击我网页上的链接（www/pdf链接）时，他会重定向到另一个不包含“返回”按钮的页面返回到上一页全屏模式。并且需要全屏模式才能访问我的网页。

谢谢！

【问题讨论】：

标签： javascript google-chrome internet-explorer browser fullscreen

【解决方案1】：

您可以使用CSS3 fullscreen 禁用链接。

PS：上面的示例在 StackOverflow iframe 中不起作用。您需要将代码复制到文件中然后进行测试。

:fullscreen a[href] {
  pointer-events: none;
  cursor: default;
  color: black;
  text-decoration: none;
}

<a href="#">Will be disabled on fullscreen</a>
<button onclick="document.body.requestFullscreen();">Go fullscreen</button>

【讨论】：

谢谢大人！但是我无法通过键入 F11 来触发全屏 css 更新。 css/js中能不能有另一种检测方法？

【解决方案2】：

您可以这样做以了解屏幕是否全屏...

if((window.fullScreen) ||
   (window.innerWidth == screen.width && window.innerHeight == screen.height)) {
     //code goes here
} else {
     // Code goes here
}

您可以覆盖锚标记的 onclick 功能或删除 href 属性。

【讨论】：

【解决方案3】：

尝试使用以下代码检测全屏模式，然后禁用超链接。

window.addEventListener('resize', function(){
    if((window.fullScreen) || (window.innerWidth == screen.width && window.innerHeight == screen.height)) {
        // browser is fullscreen 
        console.log('fullScreen!');
        //disable hyperlink
        $('a').bind("click.myDisable", function() { return false; });
    } else {
        console.log('no fullScreen!');
    }
});

[注意]以上代码使用了window的resize事件，你也可以在页面加载事件中加入if条件语句，在页面加载时判断页面是否为全屏。

有关启用/禁用超链接的更多详细信息，请查看this thread。

【讨论】：