需求:发起一个 AJAX 请求,根据请求结果来打开一个新页面。

问题:AJAX 请求后,使用 window.open() 方法来打开新页面会被浏览器阻止。

解决方法:在 AJAX 请求之前,就使用 const newWindow = window.open('about:blank'); 来打开一个空白页,AJAX 请求后拿到结果,再使用 newWindow.location = 'xxx'; 来让新页面跳转到需要的地址,

例:

// 在线支付
@action onlinePayment = async() => {
if (!this.selectedPrice) {
message.info('请选择时长');
return;
}
this.payWindow = window.open('about:blank'); // 打开一个新页面
try {
let order;
// 余额支付失败转在线支付
if (this.order.orderNo && this.order.selectedPrice === this.selectedPrice) {
order = await banlaceOnlinePay(this.order.orderNo); // ajax 请求
} else {
// 直接在线支付
order = await postOnlinePay({ goods: { goodsId: this.selectedPrice, goodsNum: 1 } }); // ajax 请求
}
this.changePayResult('paying');
if (order) {
this.payWindow.location = `${getPaymentRoot()}/#/payPage/${order.payId}`; // 修改新页面的 url
this.t = setInterval(async () => {
const status = await getOrderStatus(order.orderNo);
if (status) {
this.changePaid();
this.changeShowPayResult(false);
this.order.orderNo = null;
this.order.selectedPrice = null;
}
}, 2000);
} else {
message.error('支付出现问题');
this.payWindow.close(); // 如果 ajax 出问题,则关闭新窗口
}
} catch (e) {
message.error('支付出现问题');
this.payWindow.close();
}
};

AJAX 请求后使用 JS 打开新标签页被阻止的解决方法的更多相关文章

  1. chrome打开新标签页插件

    标签(空格分隔): 日常办公,chrome浏览器 一直被chrome浏览器打开新标签页困扰,每次点开一个新标签页还要再去点一下主页,才能打开搜索页面.如果直接点击主页,又会把当前的页面刷掉,实在是非常 ...

  2. Firefox火狐浏览器打开新标签页一直闪烁

    问题:Firefox浏览器打开新标签页一直刷新,不能打开页面 解决办法:在url栏输入about:support,打开配置文件夹,然后删除目录中包含storage所有文件,重启Firefox即可.

  3. chrome 版本 29.0.1547.76 m 解决打开新标签页后的恶心页面的问题

    个人非常不喜欢这个版本的新标签页的样子,特别是一再输入框中输入要搜索的东西,自动跑到标题栏中去了,比吃屎还恶心.下面是解决办法: 在地址栏输入:chrome://flags/ 按Ctrl+F,输入下面 ...

  4. selenium 打开新标签页(非窗口)

    如何利用webdriver打开多个标签页和链接呢,到处查找得到的往往只是如何打开标签页. 打开标签页很简单,浏览器打开标签页的快捷键是ctrl+t,那把ctrl+t的按键事件传入即可,很多种实现方式, ...

  5. 【解决方案】chrome打开新标签页自动打开chrome://newtab并且跳转到谷歌香港

    简述天,昨天开始遇到这个问题,还没有留心,结果今天多次使用chrome的时候,就发现有些不对了..打开chrome的新标签页,结果出现了自动跳转的问题我自动跳转的是下面这个网页:https://www ...

  6. chrome新版打开新标签页自动打开谷歌主页

    最近更新了chrome,发现新版有个问题. 打开标签页时会自动跳转至 https://www.google.com/webhp?ie=UTF-8&gws_rd=cr&rct=j 导致我 ...

  7. 关于ajax请求数据,并将数据赋值给全局变量的一些解决方法

    在使用ajax请求数据是,开始的时候是打算将ajax的数据取出,并赋予给全局变量,但是在实际编码过程中发现并不能将数据赋予给最开始定义的全局变量,出现这个问题的原因是由于ajax异步加载的原因,所以只 ...

  8. 教你如何修改FireFox打开新标签页(NewTab Page)的行列数

    FireFox的打开新建标签页(即NewTab Page)默认只能显示3x3个网站缩略图,这9个自定义的网站,非常方便快捷,什么hao123的弱爆了,本人从未用过此类导航网站,曾经用过的也只是abou ...

  9. 关于django配置好静态文件后打开相关图片页显示404的解决方法

    在url里设置以上代码即可,即可解决图片显示异常(出现此问题的根本原因是django版本)django3后需要加以上代码)

随机推荐

  1. 在新获取git中项目时出现的问题汇总

    新下拉git项目,今天遇到的问题,因为刚配置实用jdk和idea,所以有可能在打开springboot项目时查看mysql数据库驱动显示为红色. 之后看到pom文件也没有错,最后发现才是在项目中还没有 ...

  2. ABAP search help (搜索帮助) 几种种方法

    ABAP search help (搜索帮助) 几种种方法    域范围  ABAP 的搜索帮助有很多种方法,掌握下面的几种基本差不多了 *&------------------------- ...

  3. _quest_random

    -- 随机任务-- 可以实现玩家随机获取任务-- 小技巧:需要控制物品法防,在_function_menu表配置物品indexID为28 `comment`备注 `questId`任务ID `chan ...

  4. asp.net mvc session锁问题

    一.会话状态Session Session用于服务器端状态管理,使用Session之后,每个客户端都可以将实际的数据保存在服务器上,对于每个客户端的数据,将会生成一个对应的唯一的key(保存在客户端) ...

  5. postman(二):使用postman发送get or post请求

    总结一下如何使用postman发送get或post请求 请求 一.GET请求 通常用于请求服务器发送某个资源,请求的数据会附在URL之后,以?分割URL和传输数据,多个参数用&连接 1.请求方 ...

  6. ADC应用

    数模转换(ADC)的应用笔记 智能时代,数字信号已体现在我们生活的方方面面,A/D,D/A是重要的基础.智能手机触摸信号需要转换为数字信号才能分辨触摸位置.数字去抖:打电话或者麦克风需要将模拟声信号转 ...

  7. VSCode汉化

    1.打开VSCode 点击箭头指示地方  在搜索框中输入chinese 然后安装中文简体 2.按住 Ctrl+shift+p 选择配置显示语言 然后会看见下面的样子 添加 "locale&q ...

  8. 基于RobotFramework——自定义kafka库并导入使用

    [Kafka] 首先介绍一下我了解的kafka的皮毛信息—— kafka——一个分布流处理系统:流处理:可以像消息队列一样publish或者subscribe信息:分布式:提供了容错性,并发处理消息的 ...

  9. js的event事件对象汇总

    JavaScript事件对象是浏览器默认传入的,但是对于浏览器的兼容问题,我们需要对事件对象进行兼容.但是jQuery已经帮我们解决了所有兼容性的问题,并且给我们添加了很多有用的方法.已经是比较历史的 ...

  10. node 安装 vue-cli 创建vue项目

    $ npm install -g vue-cli $ vue init webpack-simple my-project $ cd my-project $ npm install $ npm ru ...