目标="_blank"与window.open区别

Question

我正在开发一个应用程序，用户要输入一些内容，当他们点击分享链接（例如Facebook分享链接）时不能离开页面。

<a href="https://www.facebook.com/sharer.php?u=http%3A%2F%2Fwww.example.com%2F">Share on Facebook</a>

我知道在此类链接中使用弹出窗口很常见。但对比简单的target="_blank"属性，它有什么优势呢？你如何比较这两种方法，哪一种是更合适的实践方法呢？

- Mori

Answer 1

这取决于你使用的HTML版本和你是否关心W3C验证。在HTML5中，你可以使用target="_blank"，但是在以前的XHTML版本中不能这样做，你必须使用JavaScript达到相同的效果并使你的网站通过W3C验证。我认为这就是为什么许多人使用这种方法的唯一原因。

当然，使用JavaScript会导致用户必须启用JavaScript才能在新窗口中打开此链接（使用广告拦截/ghostery等添加程序可能会阻止一些JavaScript），因此我认为如果只有可能，你应该使用target="_blank"。

- Marcin Nabiałek

---

"这取决于您使用的HTML版本以及您是否关心W3C验证。" 我正在使用HTML5。" - Mori

所以在你的情况下，我肯定会选择 target="_blank"。 - Marcin Nabiałek

请纠正我，但我认为没有令人信服的理由使用XHTML而不是html5。 - Zach Lysobey

目前几乎所有情况下都不存在。我指的是在HTML5还不存在的时候使用XHTML 1.0。 - Marcin Nabiałek

@ZachLysobey 有很多使用XHTML5的理由：因为XHTML始终是有效的XML，这意味着文档可以轻松地被处理具有良好格式化结构的XML系统（例如SQL中的“xml”类型）或XML处理库（如“System.Xml”），而这在HTML5中是不可能的，因为它不要求格式正确（例如自闭合的“input”和“br”元素或关闭的“li”标签等）。XHTML是HTML Living Standard的一部分，因为它对于将HTML作为XML进行处理至关重要。 - Dai

Answer 2

Window.open需要使用Javascript，并且可能会被弹出窗口拦截器阻止。但是，它具有其他选项（宽度、高度、选项等）。在移动浏览器上，许多选项将被忽略。

如果可能的话，最好使用_blank，因为它是HTML原生支持的。

- Jason

---

@ZachL：感谢提供参考！不过我已经看过了，它并没有提到弹出窗口的问题——只是讲述了何时使用/不使用 target="_blank"。 - Mori

那篇文章是关于是否弹出新窗口的问题，而不是如何执行它的方法。 - Jason

Answer 3

如果你希望这个链接可以同时适用于那些启用了弹窗屏蔽和禁用了JavaScript的用户，你可以使用target="_blank"属性。

- Cilan

Answer 4

使用window.open的一个不寻常的情况是，当您想要仅使用JavaScript从头创建文档时，没有适合该任务的链接。例如，当您编写用户脚本以构建新页面（当您没有服务器向客户端提供页面时）时，可能会使用此功能。对于这样的任务，<a>将无法工作。

- CertainPerformance

---

在这种情况下，为什么不使用iframe呢？ - Kaiido

它有不同的作用，对吧？如果由于某种原因您不想将其放在页面的顶层，那么 iframe 可以将某些内容嵌入到已有页面中，但是 iframe 不能用于创建全新的窗口。window.open 允许您从另一个页面的 JS 中开始使用空白的全尺寸（如果需要）窗口，并完全填充该窗口。 - CertainPerformance

那么我认为我不理解你的答案。如果您想要一个干净的JS上下文（就像我理解的那样），那么一个iframe是更可取的，因为您不需要用户手势。如果您的意思是打开一个新的选项卡到动态文档，那么iframe将无法实现，但blob：url应该在<a>中很好地完成。 - Kaiido

Answer 5

window.open() 的一个常见用途，在 WebID 得到更广泛的应用之前，是用于 OAuth 认证。

为了不中断当前页面的流程，通常会在不同的页面上进行此认证。由于认证提供者通常不允许将其页面嵌入 iframe 中，并且使用锚点 <a> 无法使两个页面进行通信，因此我们需要使用 const popup = window.open(url) 并等待认证在弹出窗口中解决后，再通过 opener.postMessage() 传递所需信息。

- Kaiido