js中【window.open】vs【window.location】

window.open 和 window.location 都用于在浏览器中加载 URL，但它们的功能和使用场景有所不同。

window.open vs window.location

1. window.open

• 功能: 用于打开一个新的浏览器窗口或标签页，或在指定名称的窗口中加载新内容。
• 使用场景: 当你需要在新窗口或标签页中加载一个页面，或者在同一个窗口中多次加载不同的内容时使用。常见于弹出窗口、广告、或者在后台打开某个链接。
• 行为: 可以指定新窗口的特性（如大小、是否显示工具栏等），并可以控制是否在新窗口、现有窗口或特定名称的窗口中打开 URL。
• 返回值: 返回对新打开窗口的引用，可以进一步操作新窗口（如关闭它、修改内容等）。

2. window.location

• 功能: 用于在当前浏览器窗口或标签页中加载新页面，或者获取和修改当前页面的 URL。
• 使用场景: 当你希望在当前窗口或标签页中导航到新页面，或者需要操作当前 URL（如重定向、获取查询参数）时使用。它更常用于页面的重定向或导航。
• 行为: 直接修改 window.location 的属性会立即在当前窗口中加载新页面。它不会打开新的窗口或标签页。

主要区别总结

• 加载方式:

  • window.open：打开新窗口/标签页，或者在指定的窗口中加载内容。
  • window.location：在当前窗口/标签页中加载内容。

• 返回值:

  • window.open：返回对新窗口的引用，可以进一步控制新窗口。
  • window.location：没有返回值，但可以通过它来获取或设置当前页面的 URL。

• 使用场景:

  • window.open：适合用在需要保持当前页面打开，同时在另一个窗口/标签页中打开新页面的场景。
  • window.location：适合用在需要直接导航、重定向或操作当前页面的场景。

示例对比

• 使用 window.open：

  window.open("https://www.example.com", "_blank");
  

  这个例子将在新标签页中打开 example.com。

• 使用 window.location：

  window.location.href = "https://www.example.com";
  

  这个例子会在当前窗口中加载 example.com，替换当前页面内容。

总结

window.open 用于创建新窗口或标签页，适合需要多窗口操作的场景。window.location 用于在当前窗口或标签页中导航，适合单窗口的页面跳转或 URL 操作。因此，选择哪个方法取决于你是否需要保留当前页面或者在新窗口中打开页面。