vue2的html打不开,vue window.open无法打开新窗口

今天遇到vue window.open无法打开外部地址,我的场景是HTTPS打开HTTP外部地址。

在网上看了很多文档,使用以下三种方法发现都不可以。

1、通过a标签加onclick跳转

newLink(url) {

let a = document.createElement(‘a‘);

a.setAttribute(‘href‘, url);

a.setAttribute(‘target‘, ‘_blank‘);

}

2、使用form的submit方法打开一个页面

这种方法需要构造一个from,然后由js代码触发form的submit,将表单提交到一个新的页面,

如果需要传递参数时,需要使用 POST 方法, 默认的 GET 方法无法传递参数。也就是新页面的url中没有参数部分。如:

newLink(url){

let form = document.createElement(‘form‘);

form.action = ‘www.baidu.com?id=1‘;

form.target = ‘_blank‘;

form.method = ‘POST‘;

document.body.appendChild(form);

form.submit();

}

3、终极解决方案–先弹出窗口,然后重定向

第三种方案,其实是一种变通方案,核心思想是:先通过用户点击打开页面,然后再对页面进行重定向。示例代码如下:

newLink(url){

// 打开页面,此处最好使用提示页面

let newLink = window.open(‘loading page‘);

axios.get(url)

.then(function (response) {

newLink.location.href = url;;

})

.catch(function (error) {

console.log(error);

})

}

最终结局方案:

1、let reg=new RegExp(‘http://‘,‘g‘)

let newMsg=JSON.stringify(url).replace(reg,‘https://‘);

window.open(res.data.url)

2、HTTP更改为HTTPS地址也可以解决,但是请求时间过长会出现拦截警告,运行即可。

5071129fb71d1e70bfeb0a359b90f3c8.png

原文:https://www.cnblogs.com/yyhhblog/p/14284754.html

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值