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

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

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


🍎一,介绍

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 参数时, widthheight 是必须明确给出值,否则,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() // 将焦点设置到当前窗口
  }
}


2,小结

 通过深入了解window.open()方法,我们能够更好地利用它来满足前端开发中的各种需求。合理使用这个方法,能够为用户提供更好的交互体验,同时要注意避免滥用,以免对用户造成困扰。在冰冷的编程世界中,让我们用window.open()这扇窗口,打开更多可能性的大门!



✨最后✨

总结不易,希望uu们不要吝啬你们的👍哟(^U^)ノ~YO!!
如有问题,欢迎评论区批评指正😁

在这里插入图片描述

  • 30
    点赞
  • 25
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值