window.location.href和window.open方法导航

window.location.href 和 window.open() 都可以用来在浏览器中进行页面跳转或导航，但它们的使用场景和行为略有不同。

1. window.location.href 方法

window.location.href 用于 改变当前页面的 URL，从而 加载新的页面。它实际上是对浏览器地址栏 URL 的直接修改，类似于点击一个链接或在地址栏中输入一个 URL。

用法：

• 获取当前 URL：console.log(window.location.href); // 返回当前页面的完整 URL
• 跳转到新 URL：window.location.href = 'https://www.example.com'; 这将使浏览器加载 https://www.example.com，并替换当前页面。

特点：

• 当前页面被替换：当你设置 window.location.href 为一个新的 URL 时，浏览器会加载新页面并 替换 当前页面。
• 浏览历史更新：当跳转到新页面时，浏览器的历史记录会更新（用户可以通过浏览器的“后退”按钮返回）。
• 同步跳转：跳转是同步进行的，即脚本会在跳转完成后才继续执行。

示例：

// 获取当前页面的 URL
console.log(window.location.href);

// 跳转到新的 URL
window.location.href = 'https://www.example.com';  // 当前页面将跳转到 https://www.example.com

2. window.open() 方法

window.open() 用于 打开一个新窗口或新标签页，并可以导航到指定的 URL。与 window.location.href 不同，window.open() 不会改变当前页面，而是打开一个新的浏览器窗口或标签页。

用法：

• 打开一个新的 URL：window.open('https://www.example.com');
• 指定窗口的名称和选项（如大小、位置等）：window.open('https://www.example.com', '_blank', 'width=600,height=400');
  • 第一个参数：要打开的 URL。
  • 第二个参数：目标窗口的名称（例如，_blank 会在新标签页中打开，_self 会在当前标签页中打开）。
  • 第三个参数：可选的窗口特性，例如窗口的大小、位置等。

特点：

• 新窗口或标签页：window.open() 通常会在新的标签页或窗口中打开 URL，取决于浏览器设置。
• 控制窗口属性：你可以控制新窗口的大小、位置和是否有工具栏等。
• 不会替换当前页面：当前页面不会被替换，浏览器会打开一个新的窗口或标签页。

示例：

// 打开一个新的标签页并跳转到指定 URL
window.open('https://www.example.com');

// 在新标签页中打开 URL 并指定窗口特性（如大小）
window.open('https://www.example.com', '_blank', 'width=600,height=400');

区别总结

何时使用 window.location.href

• 你需要 替换当前页面，例如，用户登录后跳转到新的页面，或者页面自动重定向。
• 在单页面应用中，如果需要 路由跳转，可以使用 window.location.href。

何时使用 window.open()

• 你希望在 新标签页 或 新窗口 中打开某个 URL，通常用于打开外部链接、广告、或其他不想打断当前页面的内容。
• 你想控制新窗口的 尺寸、位置 或 功能（例如弹窗）。

注意：

• 大多数浏览器会限制通过 JavaScript 打开的弹窗（例如，广告弹窗），尤其是当它们没有经过用户的交互（比如点击）时。因此，使用 window.open() 时，通常需要配合用户的点击事件触发。

如果你有任何具体的使用场景或问题，欢迎随时提问！