JavaScript中window.open()方法【详解】

本文链接：https://blog.csdn.net/sjs52406/article/details/135364743

✨前言✨
本篇文章主要针对 JavaScript 中 window.open() 方法的全面了解，以及详细参数说明使用

🍒欢迎点赞 👍 收藏 ⭐留言评论 📝私信必回哟😁
🍒博主将持续更新学习记录收获，友友们有任何问题可以在评论区留言

📍文章目录📍

🍎一，介绍
🍎二，参数说明
🍎三，使用实例
🍎四，案例加小结
- 1，小需求实战
- 2，小结

🍎一，介绍

ndow.open()是JavaScript中用于打开一个新的窗口或标签页的函数。它允许开发者创建一个带有指定 URL 的新窗口或标签页，并允许用户提供一些选项，如大小、位置、是否允许滚动条等。

window.open(url, name, features, replace)

需要注意的是，由于弹出窗口的滥用已经成为了一个安全问题，现代浏览器通常会默认阻止 window.open() 方法的调用，除非是在用户的交互下触发的。因此，在实际的开发中，我们需要谨慎使用这个方法，避免被浏览器误认为是恶意行为。

🍎二，参数说明

url 必选参数：需要打开URL的地址。可以是任何有效的 URL，包括 HTTP、HTTPS、FTP 等协议。

name可选参数：新窗口的名称，默认 _blank 。可以是任何字符串，有以下几种情况：

属性值	描述
_self：	当前窗口中打开。
_blank：	或者不写该参数：新窗口中打开，窗口name为空字符串。
任何字符串新窗口中打开，窗口name为任何字符串。	如果指定的名称已经存在，则会在该窗口中打开该 URL，而不是新建一个窗口。

features 可选参数：一个逗号分隔的字符串，指定新窗口的一些特性。这个字符串中可以包含以下属性：

属性值	描述
width：	窗口的宽度；
height：	窗口的高度；
top：	窗口距离屏幕顶部的距离，默认0；
menubar	：是否显示菜单栏，yes\no；
toolbar：	是否显示工具栏，yes\no；
location：	是否显示地址栏，yes\no；
status：	是否显示状态栏，yes\no；
resizable：	是否允许用户调整窗口大小，yes\no；
scrollbars：	是否显示滚动条，yes\no。

replace 可选参数：一个布尔值，指定新打开的 URL 是否替换当前页面的历史记录。如果为 true，则新的 URL 会替换当前页面的历史记录，用户点击浏览器的“返回”按钮时会回到上一个页面；如果为 false，则新的 URL 会添加到当前页面的历史记录中，用户点击浏览器的“返回”按钮时会回到上一个 URL。

注意：
1、当指定 features 参数时， width和 height 是必须明确给出值，否则，features 参数将不起作用。

2、features 参数中， width、 height、top、 left是常用的参数。menubar、toolbar、location、status、resizable、scrollbars 参数已经被大部分浏览器弃用（为了更好的用户体验），因此即使进行了相关设置，也不会发生变化。

🍎三，使用实例

1、当前窗口中打开网页

window.open("https://www.baidu.com/","_self");

当前窗口中打开也可以使用 window.location.href ，它是 JavaScript 中的一个属性，表示当前网页的 URL 地址。它可以用来获取当前网页的 URL ，也可以用来跳转到其他网页。

// 输出当前网页的 URL 地址
console.log(window.location.href); 
 // 跳转到 https://www.example.com
window.location.href = "https://www.example.com";

需要注意的是，window.location.href 属性是可读可写的，在设置它的值时可以直接跳转到其他网页。因此在使用时需要小心，以免不小心导致页面跳转。

2、新窗口中打开网页

window.open("https://www.baidu.com/")
window.open("https://www.baidu.com/","_blank")
window.open("https://www.baidu.com/","任何字符串");

3、在独立窗口中打开一个指定大小和位置的网页

window.open(url, "_blank", "width=800,height=300,top = 200, left=400")

🍎四，案例加小结

1，小需求实战

有这么一个需求：在当前页点击编辑，就open一个编辑的新页面，如果已经打开某个编辑的新页面，再次点击编辑，就不重新open，而是直接切换到这个编辑的页面。

// 前往编辑页面
toEdit (item) {
  if (item.appCategory === "import" && item.importType === "URL") return
  let win = window.open('', item.id + 'edit') // open一个空页面
  
  if (win.location.href === 'about:blank') { // 没有打开过走这里
    window.open(
      window.location.origin + '/ol/analysisEdit?appId=' + item.id +
        '&appName=' + item.appName +
        '&type=app',
      item.id + 'edit' // `如果指定的名称已经存在，则在该窗口中打开该 URL，而不是新建一个窗口。`
    )
  } else { // 已打开走这里
    const params = formatUrlParams(win.location.href) // 解析

    if (params.type !== 'app') {
      win.location.href = window.location.origin + '/ol/analysisEdit?appId=' + item.id +
        '&appName=' + item.appName +
        '&type=app'
    }
    win.focus() // 将焦点设置到当前窗口
  }
}