用js解决在url中传输带问号的url的问题
在业务中使用了如下逻辑:访问某页面时需要登陆,如果未登陆则跳转至登陆页面,登陆后返回这个页面。
相关js如下: 1
2
3
4
5if (!localStorage.userinfo) {
window.location.href = "login.html?lastpage=" + window.location.href;
} else {
xxx;
}
在login.html中有如下代码: 1
2
3
4
5
6
7
8var lastpage;
var url = window.location.search;
var loc = url.substring(url.lastIndexOf('=') + 1, url.length);
if (loc == null || loc == "") {
lastpage = "usercenter.html"
} else {
lastpage = loc;
}
在登陆的ajax的callback success中有 1
window.location.href = lastpage;
然而,在实际的使用中出现了问题:在访问类似
http://xxx.com/product.html?id=1
时,发现最终跳转到的页面是
http://xxx.com/1
,自然出现了 404 错误。后面发现是在
login.html?lastpage=http://xxx.com/product.html?id=1
的时候,程序直接将 1 看成了 lastpage。
有很多种方式可以解决问题,例如改进 login 中获取 url 参数的 js
等,但是我希望能够在之后也能使 url 不出现类似的错误,因此想到了对 url
进行转码。 1
window.location.href = "login.html?lastpage=" + encodeURIComponent(window.location.href);
可以将 http://xxx.com/product.html?id=1
转换成
http%3A%2F%2Fxxx.com%2Fproduct.html%3Fid%3D1
可是此时又会发现最终访问到的页面地址是
http://xxx.com/http%3A%2F%2Fxxx.com%2Fproduct.html%3Fid%3D1
看来是浏览器将已经转码的url当成一个文件访问了。因此,在 login 的 callback 里对其重新进行解码:
1 | window.location.href = unescape(lastpage); |
可以将转码过的url还原。