防止页面在新标签页/窗口中打开

Question

我正在开发一个项目，当用户在新的标签页或窗口中打开页面时，应用程序会表现得非常奇怪，导致应用程序崩溃。

我需要一些JavaScript代码来帮助我阻止这种情况。因此，基本上我想要屏蔽ctrl+点击、鼠标中键、shift+点击、从上下文菜单中打开新标签页/窗口；或者至少尽可能屏蔽它们。如果可能的话，我不想屏蔽右键点击，因为这永远不是解决方案。

注：我对js很陌生，所以任何帮助都将不胜感激。

- Cristian Marian

---

我认为这不是一个可行的解决方案。那么将页面加为书签，然后在新标签页中打开它怎么样？我认为您需要解决导致崩溃的页面潜在问题。 - jasonscript

可能有一些方法可以防止它发生，但不太可能完美无缺或与每个浏览器或设置兼容。您能否包含导致问题的代码或链接到演示？从长远来看，修复崩溃可能是更好的选择。 - NickSlash

就像我说的那样，我并不期望解决方案能够阻止每一种在新标签页/窗口中打开页面的方式；只是尽可能地阻止。修复崩溃问题并不简单，因为在新标签页/窗口中进行操作可能会从会话中删除或修改内容。当用户尝试从原始页面访问这些内容时，它们可能会丢失或与预期不符。 - Cristian Marian

Answer 1

与其

<a href="http://stackoverflow.com">link</a>

使用

<a href="javascript:void(0);" onclick="javascript:window.location.href='http://stackoverflow.com';">link</a>

点击鼠标中键在当前标签页打开链接，右键->在新标签页中打开会打开一个about:blank页面。

---

当你无法手动编辑每个链接时，可以使用此脚本：

for(var els = document.getElementsByTagName('a'), i = els.length; i--;){
    els[i].href = 'javascript:void(0);';
    els[i].onclick = (function(el){
        return function(){
            window.location.href = el.getAttribute('data-href');
        };
    })(els[i]);
}

而不是使用<a href="...">，请使用<a data-href="...">。

---

进一步地，您可以将上面的脚本更改为以下内容：

for(var els = document.getElementsByTagName('a'), i = els.length; i--;){
    var href = els[i].href;
    els[i].href = 'javascript:void(0);';
    els[i].onclick = (function(el, href){
        return function(){
            window.location.href = href;
        };
    })(els[i], href);
}

这种方式可以使链接保持不变<a href="...">，但如果用户禁用了JavaScript，则链接可能会在另一个标签页/窗口中打开。

- Kamil Jarosz

---

最后一个脚本似乎运行得非常好！谢谢，亲切的先生！ - Cristian Marian

Answer 2

将所有<a>标签的属性替换为_self，这会强制浏览器不在新标签页中打开超链接。

2021年更新：

[...document.querySelectorAll('a')].forEach((el) => {
            el.target = "_self"
    });

- Elvin Chu

Answer 3

对我来说，其他答案都不是明智的选择，因为我的文档中的一些 href 是程序性地更改的。但是这个代码块可以正常工作：

document.documentElement.addEventListener('click', function (event) {
  if(event.ctrlKey){event.preventDefault()}
});

- Samuel Vilz