由于公司需要,小菜最近在搞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啦。其实更好的做法是绑定事件,那样代码更好管理,看起来也整洁。

本文所讲貌似是很小的一件事,但如果没有意识到是href的问题,就得浪费大量不必要的时间,希望读者能够有所借鉴~~~

html中a标签href属性的一个坑的更多相关文章

  1. Spring中bean标签的属性和值:

    Spring中bean标签的属性和值: <bean name="user" class="com.pojo.User" init-method=" ...

  2. 一个好玩的小制作,以及在<a/>中的标签href="javascript:;"/href="javascript:void(0);"/href="javascript:"的用法

    一:一个小图标的制作 我们在支付宝.微信等某些地方上传文件时会遇到以下的图标,但是这样的图标其实可以用<a/>标签以及css样式完成, 具体代码如下: <!DOCTYPE html& ...

  3. 怎样获取页面中所有带href属性的标签集合

    使用: document.links document.links instanceof HTMLCollection; 注意: 1. a 标签和 area 标签可以设置 href属性, 因此可以被获 ...

  4. A标签href属性详解--记录八

    1.去掉<a>标签的下划线 <ul style=" list-style-type:none; margin:0;color:Gray; font-size:11px;ma ...

  5. html中各种标签和属性(最基础的基本都有)

    1.标题标签: h1~h6  ctrl+1~6 2.段落标签: p      ctrl+shift+p 3.换行标签: br     shift+回车 4.水平线:   hr 5.加粗标签: stro ...

  6. <a>标签href属性与onclick事件

    a标签主要用来实现页面跳转,可以通过href属性实现,也可以在onclick事件里实现. <a onclick="window.location.href='www.cnblogs.c ...

  7. PHP中逻辑运算符and/or与||/&&的一个坑

    我原来以为PHP中的and和&&是一样的, 只是写法上为了可读性和美观, 事实上我错了. 这里面深藏了一个坑! 看以下代码: $bA = true; $bB = false; $b1  ...

  8. 记新人从 excel 文件中读取字典数据踩的一个坑

    原本是打算今天分享一下最近学习接口自动化的心得体会,然而在我写模板的时候,却被一个坑拦我大半天,心得体会不得不 延期再分享了.在我无数次调试无数次看log,终于发现并解决这个问题了.下面记录一下踩的坑 ...

  9. HTML中input标签maxlength属性的妙处

    HTML中的input标签可是很常用的. HTML本身也非常简单,就是若干标签,每个标签有若干属性. 我在学习HTML的过程中,也没有太过重视. 今年,在写前端表单验证的时候,发现maxlength这 ...

随机推荐

  1. C++中使用初始化列表比在构造函数中对成员变量赋值更高效

    这是在面试中遇到的一个问题,没有答出来,后来上网上查了一些资料,终于弄明白了: 一.首先c++标准规定成员变量必须在调用构造函数前进行初始化(这一点很重要) 二.如果我们在构造函数中对成员变量进行初始 ...

  2. CCKJ 笔试

    面向对象三个特性: 面向对象技术是目前流行的系统设计开发技术,它包括面向对象分析和面向对象程序设计.面向对象程序设计技术的提出,主要是为了解决传统程序设计方法--结构化程序设计所不能解决的代码重用问题 ...

  3. good excel website

    http://www.codematic.net/excel-tools/free-excel-tools.htm

  4. JProfiler使用入门(一)——准备工作

      JProfiler是一个全功能的Java剖析工具(profiler),主要用于检查和跟踪系统(限于Java开发的)的性能. JProfiler可以通过时时的监控系统的内存使用情况,随时监视垃圾回收 ...

  5. Linux下一些文件夹的含义

    在 Linux系统里面,"分区",被称作"挂载点",简单明了的说,"挂载点"意思就是:把一部分硬盘容量,"分"成一个文件 ...

  6. IOS 从一个小地方想到……

    //(一个比较好的地方是 : cancel代表取消的意思,suspended,表示已经挂起,这些英文记住了用来命名挺好的,看看别人的过去时都是加ed的,就是这么强,所以语法不好的话,多关注ios的命名 ...

  7. MySQL下划线特殊字符(Like 语句)

    最近用了MySQL+ibatis 做项目 问题描述: 在SQL里 用到了 a.name like ##%searchName%## searchName=test_1 发现出来的结果: test_1, ...

  8. 实战录 | Redis的主从服务器搭建

    <实战录>导语 云端卫士<实战录>栏目定期会向粉丝朋友们分享一些在开发运维中的经验和技巧,希望对于关注我们的朋友有所裨益.本期分享人为云端卫士安全平台工程师田全磊,将带来Red ...

  9. oracle学习

    在平时的工作学习中,经常需要使用到oracle数据库,将平时用到的一些技巧记录在这里,以便以后随时可以翻阅. 1.日期类型的比较 插入日期时,经常会使用sysdate来插入数据,但sysdate插入的 ...

  10. css3之边框新属性

    border属性 属性 描述 border-image 图片边框 border-radius 圆角 box-shadow 矩形阴影