一、介绍
window.open()
方法是 JavaScript 中的一个内置方法,用于在浏览器中打开一个新的窗口或标签页。
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,也可以用来跳转到其他网页。
console.log(window.location.href); // 输出当前网页的 URL 地址
window.location.href = "https://www.example.com"; // 跳转到 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")
四、需求实战
有这么一个需求:在当前页点击编辑,就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() // 将焦点设置到当前窗口
}
}