在前端开发中，我们经常需要跳转到一个新的页面或者打开一个新窗口。其中，window.location是一个非常常用的 API，它可以让我们实现页面跳转。但是，在有些情况下，我们需要将跳转的链接打开在一个新的浏览器窗口中，而不是当前窗口。这时，就需要给 window.location 添加 target="_blank" 属性。本文将详细介绍如何实现这一功能。
为什么需要添加 target="_blank" 属性？
在默认情况下，window.location 跳转的链接会在当前浏览器窗口中打开。但是，在某些场景下，我们希望将链接打开在新的浏览器窗口中，比如：
- 在新窗口中打开外部链接，避免用户离开当前网站。
- 打开一个小窗口来显示一些额外信息。
- 弹出一个登录框、注册框等模态框。
在这些场景下，我们需要给 window.location 添加 target="_blank" 属性，从而实现在新的浏览器窗口中打开链接的功能。
如何添加 target="_blank" 属性？
要给 window.location 添加 target="_blank" 属性，我们可以使用以下两种方法：
方法一：直接在 URL 中添加 target="_blank" 属性
这是最简单、最直接的方法。我们只需要在跳转的链接中添加 target="_blank" 属性即可。例如：
window.location.href = "https://www.example.com" + "?target=_blank";
或者使用 ES6 模板字符串：
const url = "https://www.example.com";
window.location.href = `${url}?target=_blank`;这样，当用户点击链接时，浏览器会自动打开一个新的窗口来显示目标页面。
方法二：通过 JavaScript 打开一个新窗口，并设置其 URL
另一种方法是通过 JavaScript 打开一个新窗口，并在其中加载要跳转的页面。这种方法需要使用 window.open() API。例如：
const url = "https://www.example.com"; window.open(url, "_blank");
这里的第一个参数是要跳转的页面的 URL，第二个参数是要打开的窗口的名称（可以为空）。如果指定了 _blank，则会在新的浏览器窗口中打开链接。
示例代码
下面是一个完整的示例代码，演示如何使用上述两种方法实现在新窗口中打开链接的功能。点击按钮后，将会在新的浏览器窗口中打开百度首页。
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
------------------------
-------
------
------- --------------------------------------
--------
-------- --------- -
----- --- - ------------------------
-- ------- --- --- --------------- --
-- -------------------- - -----------------------
-- ------ ---------- ------------ ---
---------------- ----------
-
---------
-------
-------总结
本文介绍了如何给 window.location 添加 target="_blank" 属性，从而实现在新的浏览器窗口中打开链接的功能。我们可以使用两种方法来实现这一功能：在跳转的链接中添加 target="_blank" 属性，或者通过 JavaScript 打开一个新窗口，并在其中加载要跳转的页面。希望本文对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/12506