window.open()打开链接内含有中文编码问题

本文记录了一次在项目中遇到的URL中文参数被转码导致的bug,详细介绍了问题出现的场景及解决方案。通过使用JavaScript的decodeURI方法,成功将转码后的UTF-8编码恢复为中文,解决了GET请求时的数据错误。强调了网络基础知识和编码知识在问题解决中的重要性。
摘要由CSDN通过智能技术生成


前言-URL中的中文变成%百分号字符

在项目中遇到一个bug,在A页面中对某个按钮设置了事件监听,当点击后经过一系列的处理,会调用windos.open()方法,传入的URL大概为:/abc/abc?id=1&key=测试,然后跳转到B页面。
在新页面数据渲染阶段会根据页面参数进行get请求,发现请求出错,打开浏览器开发者工具中的Network发现get请求变成了:
http:xxx:xxx/abc/abc?id=1&key=%E6%B5%8B%E8%AF%95
可以发现问题就出在这里,在B页面获取URL中的参数时就已经被转码了。


问题解决-decodeURI

发现问题就对症解决,既然是在get请求的时候参数出问题,那我们在get请求之前将数据转码回中文即可。
首先是看数据格式,这里被转码的是UTF-8编码,而JavaScript中是自带有UTF-8编码和转码的方法的,也是专门用来负责对URL编码的方法,分别是:encodeURI()decodeURI()

var str = '测试'
var str_utf8 = encodeURI(str)
console.log(str_utf8) // %E6%B5%8B%E8%AF%95
console.log(decodeURI(str_utf8)) // 测试

对这两个方法感兴趣的朋友可以深入学习了解下,MDN链接:encodeURI, decodeURI


总结

这次是对bug解决的一次记录。同事也让我感受到一个良好的网络知识和编码知识这些偏底层的基础知识,所带来对于解决问题的好处。
本文参考了:URL汉字编码问题以及乱码解决

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值