target="_blank" 在某些移动设备上不起作用答案

【问题标题】：target="_blank" not working on some mobile devicestarget="_blank" 在某些移动设备上不起作用
【发布时间】：2019-03-01 11:40:54
【问题描述】：

这让我很受阻 - 我正在使用 jQuery 将一些 HTML 写入页面。该 HTML 中有一个基本链接：

<a href="http://someurl.com" target="_blank" class="external-link">Link Text</a>

问题在于，出于某种原因，在某些移动设备（Google Pixel 和某些 iPhone）上，该链接不会在新标签页（Chrome 或 Safari）中打开。所以我尝试用 JavaScript 来做，在 .external-link 上使用一个点击事件——同样的问题。它只是在这些有问题的设备上的同一个浏览器窗口中打开（在我的设备上运行良好）。

我已确认任何一种方式（target="_blank" 或 JS）确实适用于其他多种设备，包括我的 Android 手机。我在这些设备上的 Chrome/Safari 中看不到任何设置，因为这些设置无法正常工作。

对这个问题有任何猜测吗？

【问题讨论】：

您确定这些设备没有禁用弹出窗口吗？
弹出窗口被禁用 - 我的理解是该设置仅适用于弹出窗口 ads 不适用于打开新标签的链接。我的手机也禁用了弹出窗口，并且链接按预期工作。
尝试启用弹出窗口，然后再次测试。我曾经遇到过同样的问题，就是弹出窗口被禁用了。该设置因浏览器而异。

标签： javascript html mobile

【解决方案1】：

在现代浏览器中，about:blank 作为目标应该可以解决问题。
在 2018 年或 2017 年底将其用作window.open 的目标，用于桌面/移动/WebView 应用程序（当时_blank 可能无法在浏览器中按预期工作）。
欢迎澄清规范或浏览器源代码的工作原理和兼容性表链接。

2021 年 2 月 1 日编辑：主要浏览器和奇怪的边缘情况。 window.open 在某些设备上完全挂起 Firefox。

// common mobile browsers
var link    =   document.createElement('a');
link.setAttribute('rel', 'noopener noreferrer');
link.setAttribute('target', 'about:blank');
link.setAttribute('href', query);
link.click();

// other custom browsers
// noopener,noreferrer - https://stackoverflow.com/a/46958731/6357894
window.open(query, 'about:blank', 'noopener');

【讨论】：

【解决方案2】：

您可以尝试几件事：

如果这不仅仅是帖子中的拼写错误，请确保您使用的是 target="_blank" 而不是 target="blank"。关键字需要下划线。

如果您要链接到不属于您的网站，则还应包含 rel="noopener"。这可能无法单独解决这个问题，但这是一种很好的做法

【讨论】：

是的，抱歉，这是一个错字——在我的代码中是正确的。添加 rel="noopener" 似乎没有什么区别。