文章内容
2023/5/26 13:19:46,作 者: 黄兵
window.location.href 页面无法跳转问题
使用 JavaScript window.location.href 的方式实现页面跳转，但是内容成功返回，页面没有跳转。
下面是代码：
window.location.href = `${res.url}?content=${res.content}`;
上面 res.url 返回的是一个页面地址，而 res.content 返回的是需要传递的参数，包含 html 内容。
下面是返回的内容示例：
/payment/redirect?content=<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>正在为您跳转到支付页面，请稍候...</title>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>正在为您跳转到支付页面，请稍候...</title>
出现问题的原因：
页面无法跳转的原因是因为参数内容中包含了 HTML 标记和脚本代码，导致 JavaScript 代码无法正常执行。
解决方案：
在处理 URL 参数时，需要对参数进行编码，确保其在 UR L中的传递是有效和安全的。可以使用 JavaScript 内置的函数encodeURIComponent()对参数进行编码，然后在 URL 中使用已编码的参数。
最后修改代码如下：
success: (res) => {
if (res.status === 'ok') {
window.location.href = `${res.url}?content=${encodeURIComponent(res.content)}`;
}
},
if (res.status === 'ok') {
window.location.href = `${res.url}?content=${encodeURIComponent(res.content)}`;
}
},
这样页面就可以正常跳转了。
参考资料：
1、ChatGPT
其它相关推荐：
2、Angular HttpClient HttpParams() 设置参数
黄兵个人博客原创。
评论列表