碰到的变态问题 window.open 乱码

本文介绍了一种解决URL中参数中文乱码的方法,在参数前添加特定字符或使用window.location.href替代window.open即可避免乱码现象。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

[color=red][/color]A页面:
function popupPage(url, width, height){
var width = width;
var height = height;
var left = (screen.width/2) - width/2;
var top = (screen.height/2) - height/2;
var styleStr = 'toolbar=no,location=no,directories=auto,status=yes,menubar=no,scrollbars=yes,resizable=yes,z-lock=yes,width='+width+',height='+height+',left='+left+',top='+top+',screenX='+left+',screenY='+left;
window.open(url,"", styleStr);
}

onclick="popupPage('xxx.jsp?columnId=${param.columnId}&columnName=${param.columnName}'

B页面:
获取: ${param.columnName} 中文乱码 ..

后来突然在: ${param.columnName}前面加了个小横杠 - 居然就不乱码了! 真是神奇啊!

columnName=-${param.columnName}, 其实在${param.columnName}随便加一个字母也可以做到不乱码? 真不知道怎么回事!

如果页面用window.location.href 跳转,而不是window.open 也一样不会乱码!
真是神奇啊....
### 解决 JavaScript 中 `window.open` 和 `encodeURI` 的中文乱码问题 当在 JavaScript 中使用 `window.open` 打开新窗口并传递带有中文字符的 URL 参数时,可能会遇到编码不一致导致的乱码问题。为了确保参数能够被正确解析,建议采用如下方法: #### 使用 encodeURIComponent 替代 encodeURI 对于 URL 查询字符串中的单个参数值,应该使用 `encodeURIComponent` 而不是 `encodeURI` 进行编码处理[^1]。 ```javascript const paramValue = "你好世界"; const encodedParam = encodeURIComponent(paramValue); console.log(encodedParam); // 输出 %E4%BD%A0%E5%A5%BD%E4%B8%96%E7%95%8C ``` 这是因为 `encodeURI` 只会转义那些非法 URI 字符,而不会对合法但在查询部分可能引起冲突的字符(如汉字)进行充分转换;相比之下,`encodeURIComponent` 则会对除了某些特殊保留符号外的所有非 ASCII 字符都做百分号编码操作。 #### 完整示例代码 下面是一个完整的例子展示如何安全地构建带中文参数的新页面链接,并通过 `window.open` 方法打开它: ```javascript function openWindowWithChineseParams() { const baseUrl = "https://example.com/page?"; const params = new URLSearchParams({ name: '张三', message: '欢迎访问我们的网站' }).toString(); const fullUrl = `${baseUrl}${params}`; console.log(fullUrl); window.open(encodeURI(fullUrl), '_blank'); } ``` 在这个例子中,利用了现代浏览器支持的 `URLSearchParams` 对象来自动处理参数串的拼接与适当编码。最后再整体调用一次 `encodeURI` 来确保整个 URL 地址的安全性[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值