解决微信警告:该链接含有无法解析的地址链接-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"

利用上述的使用标签解析 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);

发现在微信浏览器中有效,不会出现拦截。

记录自己的爬过的每一次坑,分享发给大家。

你可能感兴趣的:(解决微信警告:该链接含有无法解析的地址链接-HTML之间的传值(JSON数据))