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原生方法,直接用即可)。

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

立即学习“前端免费学习笔记(深入)”;

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

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

     请看如下代码:

测试href测试onclick  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);  }

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

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

 

以上就是html中关于a标签href属性中的一个很少人知道的坑的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1544884.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 16:18:51
下一篇 2025年12月21日 16:19:08

相关推荐

  • html中a标签的href和onclick具体介绍

    我以前在写的href和onclick一直很随意,后来出过几次问题,以后才开始重视这个问题: 首先摘录一篇文档: 在Javascript中void是一个操作符,该操作符指定要计算一个表达式但是不返回值。 void 操作符用法格式如下: 1. javascript:void (expression) 2…

    好文分享 2025年12月21日
    000
  • 在a标签的href与onclick中使用JavaScript的区别

     在a标签的href与onclick中使用javascript的区别 ⒈  链接的 onclick 事件被先执行,其次是 href 属性下的动作(页面跳转,或 javascript 伪链接); ⒉  假设链接中同时存在 href 与 onclick,如果想让 href 属性下的动作不执行,oncli…

    好文分享 2025年12月21日
    000
  • html中关于a标签的onclick以及href的执行顺序详解

    onclick的事件被先执行,其次是href中定义的(页面跳转或者javascript) 同时存在两个定义的时候(onclick与href都定义了),如果想阻止href的动作,在onclick必须加上return false; 一般是这样写onclick=”xxx();return fa…

    好文分享 2025年12月21日
    000
  • html中关于a标签href和onclick的用法区别以及优先级别的示例详解

    我以前在写的href和onclick一直很随意,后来出过几次问题,以后才开始重视这个问题: 首先摘录一篇文档: 在Javascript中void是一个操作符,该操作符指定要计算一个表达式但是不返回值。 void 操作符用法格式如下:  1. javascript:void (expression) …

    2025年12月21日
    000
  • html中绑定点击事件的几种方法介绍

    html中为button绑定事件的方式有三种。 例如以下标签: submit 一、使用jquery进行绑定 $(‘#btn_submit’).click(function(){}); 二、使用原生js绑定,(注意:Internet Explorer 8 及更早IE版本不支持 addEventList…

    好文分享 2025年12月21日
    000
  • html中关于Button.onclick的事件总结分享

    html中关于button.onclick的事件总结分享 关于web设计中的命名标准 #page#header #logo #sm (servicemenu) .regsiter .login #nav .menu .subMenu .search .sreachbtn(搜索按钮).sreachin…

    好文分享 2025年12月21日
    000
  • 在html静态页面中给button加上提交链接的方法介绍

    1、按钮做成链接(图片)的样子提交按钮 提交链接 提交 重置按钮 重置链接 重置 普通按钮 立即学习“前端免费学习笔记(深入)”; 普通链接 链接 至于图片也一样把a标签换成img2、链接做成按钮的样子 注册=> —————&#821…

    好文分享 2025年12月21日
    000
  • html中input框中的radio是否被选中的判断

           少写文字, 直接用代码说话: 男性:女性:testfunction output(){ if(document.getElementById(“male”).checked){alert(“1”);} if(document.getElementById(“female”).check…

    好文分享 2025年12月21日
    000
  • html中关于换行符占空间的解决办法

    如上图:parent的width:600px;            child1和child2的width:300,display:inline-block; 我们希望它们并排显示,但为什么会换行呢? Document 1 2 .parent{ width:600px; border: solid…

    2025年12月21日
    000
  • html页面中如何实现保留空格以及换行符的实例分析

    我们知道,在浏览器对html页面进行渲染显示的时候,会对html文件中的空格和换行符进行处理,这样我们原来写在html文件中的格式化就可能起不到效果,尤其是在我们想展示结构化程序代码时就会遇到问题,如下所示: for i = 1 to 10 print inext i 这样的HTML文件在浏览器上显…

    好文分享 2025年12月21日
    000
  • html中关于标签如何设置默认选中的选项详解

    方法有两种。 第一种通过的属性来设置选中项,此方法可以在动态语言如php在后台根据需要控制输出结果。 123 第二种为通过前端js来控制选中的项: function change(){ document.getElementById(“sel”)[2].selected=true;}123 获取标签…

    好文分享 2025年12月21日
    000
  • html 和js 中实现倒计时功能

    倒计时主要用到的知识点:1、设置时间间隔的setinterval可以被clearinterval取消             2、毫秒转换为时分格式                 这个是效果图      下面是js中的函数 var shijian=3600; var time=null; func…

    2025年12月21日
    000
  • html中图片调整大小问题解决办法

    我从一个第三方接口获取了一张图片。当我把图片嵌入到我的页面的时候,发现图片太大了。 直接调整div大小不起作用,图片还是那么大。请问有什么办法可以调整图片显示的大小吗? 图片是动态获取的,也就是说刷新一下页面就会获取一张新的图片。所以重新裁图片解决不了问题。 html源码如下 @@##@@ @@##…

    好文分享 2025年12月21日
    000
  • 如何调整html网页中图片大小?

    CSS包含一个控制元素宽度的width属性。像控制字体一样,我们使用px(像素)来指定图片的宽度。 例如,如果我们想要创建一个名为larger-image的类选择器,把HTML元素的宽度设定为500像素,我们使用: .larger-image { width: 500px; } 任务:创建一个名为s…

    2025年12月21日
    000
  • html中为什么不使用img标签来控制图片大小?

    曾经有客户跟我说在网站后台上传了新闻图片,是相机拍摄的,传上去了但是超出了网页显示的范围,出现了滚动条,问我怎么处理,我告诉他先用图片处理软件将图片处理到合适的大小然后再上传,比如处理成600像素的宽度,高度按比例缩放,他告诉我说之前的网站都不用处理图片,传上去大小都是一样的,不会出现这种情况,后来…

    好文分享 2025年12月21日
    000
  • html中关于文本框样式的总结大全(收藏)

     输入框景背景透明: 鼠标划过输入框,输入框背景色变色:   输入字时输入框边框闪烁(边框为小方型): function borderColor(){if(self[‘oText’].style.borderColor==’red’){self[‘oText’].style.borderColor …

    好文分享 2025年12月21日
    000
  • html插入图片的示例代码详解(图)

    网页图片的基本格式:     HTML的相关标准中并没有规定图片的格式,原则上来说是任意的。但是目前市场上的主流浏览器对网页图片的格式有所要求,通常情况下是:JPEG(联合图像专家组)和GIF(图像交换格式)两种格式的图片;至于两种图片的一些特点和各自的优缺点,可通过百度自行搜索。 插入图片:   …

    2025年12月21日 好文分享
    000
  • html中如何嵌入图像的实例分析

    img元素允许我们在html文档里嵌入图像。 要嵌入一张图像需要使用src和alt属性,代码如下: @@##@@ 显示效果: 1 在超链接里嵌入图像 立即学习“前端免费学习笔记(深入)”; img元素的一个常见用法是结合a元素创建一个基于图像的超链接,代码如下: @@##@@ 浏览器显示这张图片的方…

    2025年12月21日 好文分享
    000
  • html中空格字符实体的详细介绍

    HTML 实体 在 html 中,某些字符是预留的。 在 HTML 中不能使用小于号(),这是因为浏览器会误认为它们是标签。 如果希望正确地显示预留字符,我们必须在 HTML 源代码中使用字符实体(character entities)。 字符实体类似这样: &entity_name;或者e…

    好文分享 2025年12月21日
    000
  • 关于html页面优化的实例详解

    1. 减少http请求数。     (1) 合并JS文件和CSS文件。     (2) 合并框架图片及相对变动较少的图片或成一张,通过CSS背景切割来完成渲染。     (3) 合理使用本地Cache来缓存JS/CSS/IMAGE。 2. 减小被请求文件的大小,减少请求数据占用的网络带宽。 立即学习…

    好文分享 2025年12月21日
    000

发表回复

登录后才能评论
关注微信