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这 ...
随机推荐
- WebForm ASP开发方式、 IIS服务器以及WebForm开发基础
网页端 B/S两种:(ASP.NET --网站应用开发技术) WebForm: 微软最先出现的网站开发技术 MVC: 后来开发,为了让java.PHP转过来的开发人员更容易接受使用 客户端 C/ ...
- 安装mysql5.5时候的报错解决办法:
每次安装mysql5.5的时候总会报出一下错误: -- Could NOT find OpenSSL (missing: OPENSSL_LIBRARIES OPENSSL_INCLUDE_DIR) ...
- 一个继承TList的例子
类声明部分: TDMSTrains = class(TList) private FHashed: Boolean; FHashList: TFpHashList; FOwnsObjects: Boo ...
- 各种 starter poms (启动器)
starter包含了搭建项目,快速运行所需的依赖.它是一个依赖关系描述符的集合.当应用需要一种spring的服务时,不需要粘贴拷贝大量的依赖关系描述符.例如想在spring中使用redis,只需要在项 ...
- Sublime 保存时自动转换tab成空格
笔者最近学习c, c语言的清新代码风格让人眼前一亮,不禁爱上这种写作风格,变量名.等号.常量值之间空格分隔,清爽便于阅读. 于是笔者以此为代码写作规范,查阅自己以前写的java代码,以下用notepa ...
- 声明、定义 in C++
序 声明和定义是我们使用的基础,但是对于声明和定义的概念,我们不甚了了,也就是说感觉好像是这样,但是真要详细说明就说不上来. 有博主对于声明和定义有以下描述: 1.需要建立存储空间的 ...
- python学习笔记-socket
socket socket通常也称作"套接字",用于描述IP地址和端口,是一个通信链的句柄,应用程序通常通过"套接字"向网络发出请求或者应答网络请求. sock ...
- 简易版CMS后台管理系统开发流程
目录 简易版CMS后台管理系统开发流程 MVC5+EF6 简易版CMS(非接口) 第一章:新建项目 MVC5+EF6 简易版CMS(非接口) 第二章:建数据模型 MVC5+EF6 简易版CMS(非接口 ...
- android中如何发送及接收数据(两种方法)?
1.如在MainActivity.java中的按钮点击时设置: //发送数据方法1--简单型 i.putExtra("txt", "没错,我就是刚传来的信息!" ...
- C++矩阵运算库armadillo配置笔记
前言 最近在用C++实现神经网络模型,优化算法需要用到矩阵操作,一开始我用的是boost的ublas库,但用着用着感觉很不习惯,接口不够友好.于是上网搜索矩阵运算哪家强,大神们都推荐armadillo ...