解决微信警告:该链接含有无法解析的地址链接-HTML之间的传值(JSON数据)
最近微信公众号开发进入二期了,增添关于汽车租赁的商城模块。遇到界面传值数据问题。
1.首先我用的方式是:
location.href="sales-detail.html?id="+escape(JSON.stringify(htmlObj));
另外,在第二界面用:
var obj =JSON.parse( unescape(obj));
这种方式其他浏览器没有问题,(具体用法:http://www.jianshu.com/p/4aca750abd64 )
但是在微信浏览器中打开,会出现强制性拦截:警告界面,该链接中含有无法解析的地址链接,是否继续访问。
这里:
首先想声明的是,W3C把这个函数废弃了,身为一名前端如果还用这个函数是要打脸的。
根据 MDN 的说明,escape 应当换用为 encodeURI 或 encodeURIComponent;unescape 应当换用为 decodeURI 或 decodeURIComponent。escape 应该避免使用。举例如下:
escape只是对字符串进行编码(而其余两种是对URL进行编码),与URL编码无关。编码之后的效果是以 %XX 或者 %uXXXX 这种形式呈现的。它不会对 ASCII字符、数字 以及 @ * / + 进行编码。
//而 escape 会编码成下面这样,encode 了冒号却没 encode 斜杠,十分怪异,故废弃之
escape('https://www.baidu.com/ a b c')
// "https%3A//www.baidu.com/%20a%20b%20c
encodeURI
是 Javascript 中真正用来对 URL 编码的函数。它着眼于对整个URL进行编码,如下:
encodeURI('https://www.baidu.com/ a b c')
// "https://www.baidu.com/%20a%20b%20c" //
总结:可以看到空格被编码成了%20,而斜杠 / ,冒号 : 并没有被编码。所以,它用于对整个 URL 直接编码,不会对 ASCII字母 、数字 、 ~ ! @ # $ & * ( ) = : / , ; ? + ' 进行编码。
但:有的时候,我们的 URL 长这样子,请求参数中带了另一个 URL :
var URL = "http://www.a.com?foo=http://www.b.com?t=123&s=456";
直接进行 encodeURI 显然是不行的。因为 encodeURI 不会对冒号 : 及斜杠 / 进行转义,那么就会出现上述所说的服务器接受到之后解析会有歧义。
这个时候,就该用到 encodeURIComponent() 。它的作用是对 URL 中的参数进行编码,记住是对参数,而不是对整个 URL 进行编码。
encodeURIComponent('https://www.baidu.com/ a b c')
// "https%3A%2F%2Fwww.baidu.com%2F%20a%20b%20c"
同时:它仅仅不对 ASCII字母、数字 ~ ! * ( ) ' 进行编码。
错误的用法:
var URL = "http://www.a.com?foo=http://www.b.com?t=123&s=456";
encodeURIComponent(URL);
// "http%3A%2F%2Fwww.a.com%3Ffoo%3Dhttp%3A%2F%2Fwww.b.com%3Ft%3D123%26s%3D456"
// 错误的用法,看到第一个 http 的冒号及斜杠也被 encode 了
正确的用法:encodeURIComponent() 着眼于对单个的参数进行编码:
var param = "http://www.b.com?t=123&s=456"; // 要被编码的参数
URL = "http://www.a.com?foo="+encodeURIComponent(param);
//"http://www.a.com?foo=http%3A%2F%2Fwww.b.com%3Ft%3D123%26s%3D456"
利用上述的使用<a>标签解析 URL 以及根据业务场景配合 encodeURI() 与 encodeURIComponent() 便能够很好的处理 URL 的编码问题。
应用场景最常见的一个是手工拼接 URL 的时候,对每对 key-value 用 encodeURIComponent 进行转义,再进行传输。
2.我猜想:是不是一长串的参数的连接,微信浏览器会出现解析问题。所以我试着localStorage进行传参。
在第一个面:
localStorage.setItem("tmp",JSON.stringify(htmlObj));
window.location.href = "sales-detail.html";
在第二界面:
var obj = localStorage.getItem("tmp");
var Object = JSON.parse(obj);
发现在微信浏览器中有效,不会出现拦截。
记录自己的爬过的每一次坑,分享发给大家。
更多推荐
所有评论(0)