html中a标签href属性的一个坑
由于公司需要,小菜最近在搞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属性的一个坑的更多相关文章
- Spring中bean标签的属性和值:
Spring中bean标签的属性和值: <bean name="user" class="com.pojo.User" init-method=" ...
- 一个好玩的小制作,以及在<a/>中的标签href="javascript:;"/href="javascript:void(0);"/href="javascript:"的用法
一:一个小图标的制作 我们在支付宝.微信等某些地方上传文件时会遇到以下的图标,但是这样的图标其实可以用<a/>标签以及css样式完成, 具体代码如下: <!DOCTYPE html& ...
- 怎样获取页面中所有带href属性的标签集合
使用: document.links document.links instanceof HTMLCollection; 注意: 1. a 标签和 area 标签可以设置 href属性, 因此可以被获 ...
- A标签href属性详解--记录八
1.去掉<a>标签的下划线 <ul style=" list-style-type:none; margin:0;color:Gray; font-size:11px;ma ...
- html中各种标签和属性(最基础的基本都有)
1.标题标签: h1~h6 ctrl+1~6 2.段落标签: p ctrl+shift+p 3.换行标签: br shift+回车 4.水平线: hr 5.加粗标签: stro ...
- <a>标签href属性与onclick事件
a标签主要用来实现页面跳转,可以通过href属性实现,也可以在onclick事件里实现. <a onclick="window.location.href='www.cnblogs.c ...
- PHP中逻辑运算符and/or与||/&&的一个坑
我原来以为PHP中的and和&&是一样的, 只是写法上为了可读性和美观, 事实上我错了. 这里面深藏了一个坑! 看以下代码: $bA = true; $bB = false; $b1 ...
- 记新人从 excel 文件中读取字典数据踩的一个坑
原本是打算今天分享一下最近学习接口自动化的心得体会,然而在我写模板的时候,却被一个坑拦我大半天,心得体会不得不 延期再分享了.在我无数次调试无数次看log,终于发现并解决这个问题了.下面记录一下踩的坑 ...
- HTML中input标签maxlength属性的妙处
HTML中的input标签可是很常用的. HTML本身也非常简单,就是若干标签,每个标签有若干属性. 我在学习HTML的过程中,也没有太过重视. 今年,在写前端表单验证的时候,发现maxlength这 ...
随机推荐
- java break语句的三种用法
1.用于switch语句当中,用于终止语句 2.用于跳出循环,此为不带标签的break语句,相当与goto的作用 e.g while(i<j&&h<k){ if(h< ...
- 灭顶之灾之网络电视精灵——S2 2.8
从前,有一个神奇的东西叫做搞搞精灵 关于他,有一段历史. 哎呀!我去!写不下去了. -.-以上玩笑 首先需求分析 TreeView显示两种频道 TypeA和TypeB 所以创建三个类 ChannelB ...
- WCF学习记录
一个demo: http://www.cnblogs.com/iamlilinfeng/p/4083827.html
- 如何通过maven ,将本地jar 安装到仓库中去。
场景: 现在很多公司,都有 maven 的私服 ,在maven项目中,基本上有两个仓库 ,一个是maven的公共仓库,一个是私服仓库: 有的时候,我们download 别人的代码的时候,pom文件中报 ...
- Verilog之SOS信号-仿顺序操作
SOS信号:. . . _ _ _ . . . 1. module sos_module ( CLK, RSTn, Pin_Out, SOS_En_Sig ); input CLK; input RS ...
- ue4 SNew背后的逻辑
ue4的ui库Slate体系非常庞大,即使是在创建对象这一小事上,也是相当复杂: SLATECORE_API TSharedRef<SWidget> SNullWidget::NullWi ...
- SSE:服务器发送事件,使用长链接进行通讯
概述 传统的网页都是浏览器向服务器“查询”数据,但是很多场合,最有效的方式是服务器向浏览器“发送”数据.比如,每当收到新的电子邮件,服务器就向浏览器发送一个“通知”,这要比浏览器按时向服务器查询(po ...
- 【Java学习笔记】<集合框架>TreeSet,Comparable,Comparator
public class Person implements Comparable{ private String name; private int age; public Person(){ su ...
- window.open打开窗体和if嵌套
<script> function openWindow(){var my=confirm("你要打开窗口吗?")if(my==true){ var url ...
- C/C++字符串函数之复制函数
突然发现对字符串函数缺乏系统的了解,所以花了一点时间专门整理下,在此记录之,以方便自己及有需要的人使用. C/C++字符串函数的头文件:string.h 复制函数主要有4个,如下: 1.char * ...