js 打开新标签页和关闭标签页

window.open('url', '_blank'),blank属性可以在新标签打开

window.open 直接调用可能会有拦截提示,在用户交互事件时调用不会出现拦截

由window.open 打开的新的标签页或弹窗可以由window.close关闭

window.open会返回一个 WindowProxy 对象。只要符合同源策略安全要求,返回的引用就可用于访问新窗口的属性和方法

比如在当前页面关闭已打开的窗口

const WindowProxy = window.open(url,'_blank')
WindowProxy.close()

 也可以在新打开的页面关闭当前页

window.close()

如果用户点击触发异步事件,等异步事件完成后再打开新的弹窗,可能会因为等待时间过长导致出现弹窗拦截,这种情况可以新打开一个空白页面或者自定义一个等待页面,等异步完成后更新

data(){
  return {
    openWin: ''
  }
}
function openPage(){
  // 打开一个空白窗口或者等待页面并存储引用
  this.openWin = window.open('about:blank', '_blank');

  // 进行异步请求
  fetch('你的异步请求URL')
    .then(response => response.json()) // 假设服务器返回的是JSON数据
    .then(data => {
      // 异步请求完成,获取所需的URL
      var url = data.url; // 假设返回的数据中包含一个名为"url"的字段

      // 填充新打开窗口的URL
      this.openWin.location.href = url;
    })
}
funntion closePage(){
    this.openWin.close()
}

<div @click="openPage">点击跳转</div>
<div @click="closePage">关闭标签页</div>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值