尝试更改为在新标签页中打开链接 -- onClick="window.location

Question

尝试让当前代码在一个新标签页中打开链接。尝试了此网站上针对类似问题的解决方案，但尚未使其正常工作...

当前可用的代码为：

<div onClick="window.location='https://URL';" class="element _element element-4"></div>

从研究中得知，我应该将其更改为onClick=window.open，因此现在我已经更改为：

<div onClick=window.open(https://URL, Name) class="element _element element-4"></div>

问题在于，当我将代码更改为window.open（如上所述）时，现在单击链接根本不起作用，更不用说在新标签页中打开了。

这与/div有关吗？ 我需要更改CSS或JS吗？ 非常感谢任何帮助！ :)

- user3711262

---

使用<a href="http://..." target="_blank">Link</a>有什么问题？ - Pedro Estrada

Answer 1

我猜你在调用函数时使用了错误的公式，请检查你函数的参数。

你可以在这里查看更多细节。

例如，下面的代码是有效的：onClick="window.open('yourURL');"

- SilenceHost

Answer 2

您需要传入字符串形式的url和name参数：

window.open("https://amazon.com", "amz");

看看这是否有帮助。

然而，用户可以在某些浏览器上更改设置，以影响打开新窗口或单击链接的行为方式（请参见链接的target属性，详见链接的参考文档）。因此，根据用户的设置和浏览器选择，您可能无法始终获得所需的结果。

- David Atchley

---

谢谢您的建议！我已经更改为'code' <div onClick=window.open('URL';, '_blank') class="element _element element-4"></div>但不幸的是，链接在被点击后仍然没有任何反应。 - user3711262

你能把你的实际代码发出来看看吗？'URL'不是一个URL，而是一个静态字符串。'_blank'不应该作为窗口名称参数放在那里，而应该在A标签本身的目标属性中。 - David Atchley

对于任何感到困惑的人，name属性就是target - window.open("http://yourlink.com", "_self"); - Grant

window.open() 的第二个参数是添加一个窗口名称，你可以看到在 amazon.com 的情况下会被更改，一旦页面加载完成，你可以在控制台中检查 window.name 的结果与你设置的不同。其他网站表现正常。 - Nishutosh Sharma

Answer 3

<span 
   class="pseudolink" 
   onclick="location='https://jsfiddle.net/'">
Go TO URL
</span>

.pseudolink { 
   color:blue; 
   text-decoration:underline; 
   cursor:pointer; 
   }

https://jsfiddle.net/mafais/bys46d5w/

- MAFAIZ

Answer 4

正如Pedro Estrada在他们的评论中所说，解决这个问题的合理方法是使用真实的链接：

<a href="https://example.com/" target="_blank"></a>

如果您需要 <div> 的块级布局，请使用 display: block 样式来设置链接。

真正的链接具有许多有用的功能，而假的 JS hack 则缺乏这些功能：

• 它们可以根据用户的需求在新标签页或新窗口中打开
• 您可以在打开链接之前看到链接指向哪里
• 您可以复制链接（或浏览器右键菜单中的任何其他功能）
• 屏幕阅读器将 <a> 视为链接。试图使用 JS 复制此功能将会很脆弱和有 bug。
• 如果您的 JS 加载失败或用户未启用 JS，则链接仍然有效
• 您的网站加载速度更快，运行速度更快，因为它不依赖于 JavaScript 来模拟浏览器已经实现的功能

- wec