今天遇到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地址也可以解决,但是请求时间过长会出现拦截警告,运行即可。
分类:
VUE
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· .NET Core 中如何实现缓存的预热?
· 三行代码完成国际化适配,妙~啊~
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?