AJAX 请求后使用 JS 打开新标签页被阻止的解决方法
需求:发起一个 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 打开新标签页被阻止的解决方法的更多相关文章
- chrome打开新标签页插件
标签(空格分隔): 日常办公,chrome浏览器 一直被chrome浏览器打开新标签页困扰,每次点开一个新标签页还要再去点一下主页,才能打开搜索页面.如果直接点击主页,又会把当前的页面刷掉,实在是非常 ...
- Firefox火狐浏览器打开新标签页一直闪烁
问题:Firefox浏览器打开新标签页一直刷新,不能打开页面 解决办法:在url栏输入about:support,打开配置文件夹,然后删除目录中包含storage所有文件,重启Firefox即可.
- chrome 版本 29.0.1547.76 m 解决打开新标签页后的恶心页面的问题
个人非常不喜欢这个版本的新标签页的样子,特别是一再输入框中输入要搜索的东西,自动跑到标题栏中去了,比吃屎还恶心.下面是解决办法: 在地址栏输入:chrome://flags/ 按Ctrl+F,输入下面 ...
- selenium 打开新标签页(非窗口)
如何利用webdriver打开多个标签页和链接呢,到处查找得到的往往只是如何打开标签页. 打开标签页很简单,浏览器打开标签页的快捷键是ctrl+t,那把ctrl+t的按键事件传入即可,很多种实现方式, ...
- 【解决方案】chrome打开新标签页自动打开chrome://newtab并且跳转到谷歌香港
简述天,昨天开始遇到这个问题,还没有留心,结果今天多次使用chrome的时候,就发现有些不对了..打开chrome的新标签页,结果出现了自动跳转的问题我自动跳转的是下面这个网页:https://www ...
- chrome新版打开新标签页自动打开谷歌主页
最近更新了chrome,发现新版有个问题. 打开标签页时会自动跳转至 https://www.google.com/webhp?ie=UTF-8&gws_rd=cr&rct=j 导致我 ...
- 关于ajax请求数据,并将数据赋值给全局变量的一些解决方法
在使用ajax请求数据是,开始的时候是打算将ajax的数据取出,并赋予给全局变量,但是在实际编码过程中发现并不能将数据赋予给最开始定义的全局变量,出现这个问题的原因是由于ajax异步加载的原因,所以只 ...
- 教你如何修改FireFox打开新标签页(NewTab Page)的行列数
FireFox的打开新建标签页(即NewTab Page)默认只能显示3x3个网站缩略图,这9个自定义的网站,非常方便快捷,什么hao123的弱爆了,本人从未用过此类导航网站,曾经用过的也只是abou ...
- 关于django配置好静态文件后打开相关图片页显示404的解决方法
在url里设置以上代码即可,即可解决图片显示异常(出现此问题的根本原因是django版本)django3后需要加以上代码)
随机推荐
- WIN8外包公司—长年承接WIN8(surface)应用外包—北京动点飞扬软件
WIN8外包公司—长年承接WIN8(surface)应用外包 一.我们长年专门承接WIN8外包.Surface外包. WPF 外包.HTML5外包.WindowsPhone 外包.Silverligh ...
- while循环和递归
这个问题是在数据结构的二叉树添加结点的时候碰见 添加新结点的时候可以用while循环自身解决(这里这个方式更好) 也可以用递归解决 递归就像小明去楼顶取东西 ,从一楼开始爬,看,不是的,继续爬,每层 ...
- 环境准备—之—linux下安装jdk
本文大部分转自 https://www.cnblogs.com/Dylansuns/p/6974272.html openjdk与jdk的区别 ----反正不一样,要不名字也不会不相同了 https ...
- 第 8 章 容器网络 - 071 - 如何定制 Calico 的 IP 池?
定制IP池 首先定义一个 IP Pool,比如: calicoctl create -f ipPool.yml 用此 IP Pool 创建 calico 网络. docker network crea ...
- English trip EM2-LP-4B At School Teacher:Russell
课上内容(Lesson) Where is Loki a student? Loki is in Meten, BaobaoStreet, Chengdu. What is he studying? ...
- 自我学习成长系列之<<FirstHead设计模式>>
第一章 设计模式入门 1.好词好句: 好的设计是可以应付改变. 2.驱动改变的因素:(a)客户需求不清晰,后期会一直变 (b)遇到坑爹的产品,自己不会全扔给程序员 (c)在开发过程中,产生一个新概念, ...
- 压力测试+接口测试(工具jmeter)
jmeter是apache公司基于java开发的一款开源压力测试工具,体积小,功能全,使用方便,是一个比较轻量级的测试工具,使用起来非常简单.因 为jmeter是java开发的,所以运行的时候必须 ...
- python实现以application/json格式为请求体的http post请求
接口传递数据格式类型为json格式,如下图抓包查看 Python实现脚本请求接口并以中文打印接口返回的数据 import json import requests url = "https: ...
- 机器学习 之LightGBM算法
目录 1.基本知识点简介 2.LightGBM轻量级提升学习方法 2.1 leaf-wise分裂策略 2.2 基于直方图的排序算法 2.3 支持类别特征和高效并行处理 1.基本知识点简介 在集成学习的 ...
- grpc(一)grpc-java之helloworld
1.参考资料 (1)grpc-java官网QuickStart: https://grpc.io/docs/quickstart/java.html (2)grpc-java的github: http ...