视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
html中关于a标签href属性中的一个很少人知道的坑
2020-11-27 15:28:50 责编:小采
文档


由于公司需要,小菜最近在搞app web开发,目前只有ios和android版本,虽然仅此两个版本,但是依然要考虑浏览器兼容性问题,因为android和ios默认浏览器内核是不一样的。

先说说兼容性问题是什么。假如有这样一个URL:

 http://www.kpdown.com/search?name=Ben Nadel

此URL后边有一个name参数,只不过参数的值竟然带了空格,这样的链接,直接用android浏览器访问,是没有问题的,但用ios的浏览器访问,这就是一个错误的URL,会报错的!

所以,我们会想到编码,name参数的值,可以用encodeURIComponent()方法进行编码,然后再拼接到URL上,这样就安全了(encodeURIComponent是js原生方法,直接用即可)。

然后,我们可以这样利用超链接:

 <a href="javascript:openURL('http://www.kpdown.com/search?name=Ben%20Nadel');" >查询</a>

利用openURL这个js方法进行页面跳转(假设有一个openURL方法,其中不涉及任何解码操作)。

这段代码在android中运行正常,但到了ios中,依然报错,的确是编码了,为什么还是不行呢?

请看如下代码:

<a href="javascript:openURL('http://www.kpdown.com/search?name=Ben%20Nadel');">测试href</a>
<a href="javascript:;" onclick="javascript:openURL('http://www.kpdown.com/search?name=Ben%20Nadel');">测试onclick</a>

<script>
 function openURL(url){
 /*
 * 测试href --print--> http://www.kpdown.com/search?name=Ben Nadel
 * 测试onclick --print--> http://www.kpdown.com/search?name=Ben%20Nadel
 */
 console.log(url);
 }
</script>

由此可见:“万恶”的href属性,在调用openURL传参时自动解码,而onclick属性则保持参数原封不动。

因此,小菜强烈不推荐使用a标签的href属性调用js,onclick方法非常的科学,非常的稳定,非常的正确,href的本意就是用来跳转URL,就不要用它来执行js啦。其实更好的做法是绑定事件,那样代码更好管理,看起来也整洁。

下载本文
显示全文
专题