使用 window.open() (最常用)

这是最直接、最常用的方法，可以在新标签页、新窗口或当前窗口中打开一个 URL。

js中打开一个网页代码
（图片来源网络，侵删）

基本语法

window.open(url, target, features);
  • url (字符串): 你要打开的网页地址 (必需)。
  • target (字符串): 在哪里打开链接，这是一个可选参数，常见的值有：
    • "_blank": 在新标签页或新窗口中打开,这是最常用的值。
    • "_self": 在当前标签页中打开 (覆盖当前页面)。
    • "_parent": 在父窗口中打开 (如果页面在 <iframe> 中)。
    • "_top": 在最顶层的窗口中打开 (跳出所有 <iframe> 嵌套)。
    • 一个自定义的窗口名称 (如 "myWindow"): 如果窗口不存在，则创建一个新窗口；如果已存在,则在该窗口中打开。
  • features (字符串): 一个逗号分隔的字符串，用于配置新窗口的特性，如宽度、高度、工具栏等。注意：出于安全原因，现代浏览器对 features 参数的支持非常有限，很多特性已被忽略或禁用。

代码示例

示例 1：在新标签页中打开网页 (最常见的需求)

// 点击按钮时，在新标签页中打开百度
function openBaiduInNewTab() {
  window.open('https://www.baidu.com', '_blank');
}
// 在 HTML 中调用
// <button onclick="openBaiduInNewTab()">打开百度</button>

示例 2：在当前标签页中打开网页 (覆盖当前页面)

function openGoogleInSelf() {
  window.open('https://www.google.com', '_self');
}
// <button onclick="openGoogleInSelf()">打开谷歌 (覆盖本页)</button>

示例 3：打开一个自定义大小的新窗口 (注意：现代浏览器可能限制此功能)

function openCustomSizedWindow() {
  // 尝试打开一个宽度600px，高度400px的新窗口
  // 注意：features字符串的格式和可用性取决于浏览器
  window.open('https://github.com', 'myWindow', 'width=600,height=400');
}
// <button onclick="openCustomSizedWindow()">打开一个自定义大小的窗口</button>

使用 location 对象 (改变当前窗口)

如果你想在当前标签页中导航到一个新的网页，location 对象是最佳选择,它不会打开新窗口或新标签页。

基本语法

// 方法1：直接赋值给 href 属性
location.href = 'https://www.mozilla.org';
// 方法2：使用 assign() 方法 (效果与 href 相同)
location.assign('https://www.mozilla.org');
// 方法3：使用 replace() 方法
location.replace('https://www.mozilla.org');

href、assign 和 replace 的区别

  • location.href 和 location.assign(url):

    • 会导航到新的 URL。
    • 一个关键区别是： 用户可以通过点击浏览器的“后退”按钮返回到之前的页面。

  • location.replace(url):

    • 也会导航到新的 URL。
    • 它会替换掉当前的历史记录，这意味着用户点击“后退”按钮时，无法返回到被替换的那个页面，这在某些场景下非常有用，例如在登录成功后，你不想让用户通过“后退”按钮回到登录页。

创建并提交一个表单 (模拟表单提交)

这种方法比较少见,但在某些需要传递复杂数据或模拟特定表单提交行为的场景下很有用。

js中打开一个网页代码
（图片来源网络，侵删）

基本思路

  1. 动态创建一个 <form> 元素。
  2. 设置 action 属性为目标 URL。
  3. 设置 method 属性为 GET 或 POST。
  4. 创建并添加 <input> 元素来传递参数。
  5. 将表单添加到 <body> 中。
  6. 调用 form.submit() 方法提交表单。
  7. （可选）从 DOM 中移除表单。

代码示例

function submitFormToExample() {
  // 1. 创建 form 元素
  const form = document.createElement('form');
  form.method = 'GET'; // 或者 'POST'
  form.action = 'https://example.com/search';
  // 2. 创建 input 元素并添加参数
  const input1 = document.createElement('input');
  input1.type = 'hidden';
  input1.name = 'q'; // 参数名
  input1.value = 'JavaScript'; // 参数值
  const input2 = document.createElement('input');
  input2.type = 'hidden';
  input2.name = 'lang';
  input2.value = 'zh-CN';
  // 3. 将 input 添加到 form 中
  form.appendChild(input1);
  form.appendChild(input2);
  // 4. 将 form 添加到 body 中 (必须添加到 DOM 才能提交)
  document.body.appendChild(form);
  // 5. 提交表单
  form.submit();
  // 6. (可选) 提交后移除表单，避免页面残留
  document.body.removeChild(form);
}
// <button onclick="submitFormToExample()">通过表单提交打开网页</button>

总结与对比

方法 语法 主要用途 备注
window.open() window.open(url, target) 打开新标签页/新窗口 最常用，灵活，但受浏览器安全策略限制。
location.href location.href = url 在当前窗口跳转 简单，用户可后退。
location.assign() location.assign(url) 在当前窗口跳转 效果与 href 相同，用户可后退。
location.replace() location.replace(url) 在当前窗口跳转 用户不可后退，常用于登录后跳转。
创建表单 动态创建并提交 <form> 模拟表单提交 适用于需要传递复杂参数的场景。

安全提示

现代浏览器为了防止恶意网站弹出过多的广告窗口，对 window.open() 有一些限制：

  • window.open() 不是在用户直接触发的事件（如点击按钮）中调用的，它很可能会被浏览器阻止（在 window.onload 中调用）。
  • 即使在用户事件中调用,很多浏览器的弹出窗口拦截器也可能阻止它。

最佳实践是将 window.open() 的调用放在用户明确触发的函数中，比如按钮的 onclick 事件。