Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Html<a>标签href的困惑记载

Html<a>标签href的困惑记载

作者头像
晚晴幽草轩轩主
发布于 2018-03-27 07:32:34
发布于 2018-03-27 07:32:34
3.4K00
代码可运行
举报
文章被收录于专栏:静晴轩静晴轩
运行总次数:0
代码可运行
近日,在工作中遇到一个小问题(给手游平台做些网页活动,其中牵涉到一个按钮链接,就习以为常的用了<a>标签,Click响应之后走一段js代码逻辑-弹出一个分享微信弹框。Chrome和Android平台都没问题,测试阶段发现Ios平台出现了点问题~弹框闪现一下之后,页面被重新渲染了,自然弹框又被消隐掉了。),经历一番查证,个中缘由原来如此。

出现问题后,立马走了段代码逻辑,发现并没任何逻辑问题。并且Chrome和Android平台又都OK的,只是Ios平台有此问题。经验不够丰富情形之下,只能在Ios手机上先Alert下,看下代码走的路线了。代码采用Backbone框架而成,经alert出来的提示,发现Click之后,页面view竟被重新执行了一次。额…逻辑没问题,而类似活动无数,没出现类似问题啊,不明就里~[好桑心,无能为力又无从下手的感觉,好难受]。

之后,请出同事中的前辈帮着Codereview下,终定为出了问题。原是误用这<a>惹出来的。这边见大家都用<a href="javascript:;"></a>。当然之前偶然看了张鑫旭一篇《疑问:为什么要使用href=”javascript:void(0);”?》,从中窥测之前多用的是<a href="javascript:void(0);"></a>。但为什么要用这个,他本人也没弄明白,然后读完,我也没明白。而此处,嫌用<a href="javascript:;"></a>这么长麻烦,就用<a href="#"></a>这个试了下,唉~可以啊,Android也可以唉,那就用下了(噢,问题就因此埋下了,额额额~v~)。

A Problem Is A Chance For You To Do Your Best!我坚信这一点。惹出些问题并不见得都是坏事。每每因为自己的造成的这些个问题,反倒收获不少,?。

之后就去查证了下关于这Html<a>标签的Href属性。超链接的 URL。可能的值:

  • 绝对 URL - 指向另一个站点(比如 href=”http://www.jeffjade.com")
  • 相对 URL - 指向站点内的某个文件(href=”index.htm”)
  • 锚 URL - 指向页面中的锚(href=”#top”)

根据网搜得到的答案如下,亲测也的确如此: ​<a href="javascript:void(0)">点击</a>: 点击链接后不会回到网页顶部 <a href="#">点击</a>: 点击后会回到网面顶部; 这里的href=”javascript:;”,其中javascript:是伪协议,它可以让我们通过一个链接来调用javascript函数.而采用这个方式 javascript:;可以实现A标签的点击事件运行时,如果页面内容很多,有滚动条时,页面不会乱跳,用户体验更好。点击链接后也不会回到网页顶部。

而对于Href第三点~指向页面中的锚,如下用法:

  1. 需要转到地方添加,<a href="#命名">文字</a>,注意href值是#开头+英文字母命名
  2. 需要在被转到位置添加,<span id="命名" name="命名"></span>,注意id和name值相同并且与a命名相同(亲测,id必须跟a命名相同,而span的name则不用!并且当 href=”#” 之时也会回到页面顶部.)

即可得出当使用(href=”#”)之时即有可能会回到页面顶部。但问题是,活动一屏幕足以显示完,无需滑动,Ios手机也是如此。那么使用(href=”#”)在这里是不会影响页面刷新的。得到ios客户端开发的说法是:这样写[使用(href=”#”)]会触发到客户端的监控,从而引发异常。(~这一段,很多疑惑,只是猜测,有待继续学习检验)。


此段15-08-19更新: 对于这一段的不理解,后来在ios客户端童鞋的帮助下消解了。对于Ios跟js的交互是略有点不同的: ios中objective-c与js的交互这篇文章会有讲到。js调用objective-c的方法, 代码应该这么做:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function testFunc(cmd,parameter1)   
{   
    document.write(Date());   
    document.location="objc://"+cmd+":/"+parameter1;  //cmd代表objective-   
c中的的方法名,parameter1自然就是参数了  (这里的objc://可以随意的去改)
}

在Ios里面有一个监听 http 跳转的方法;一旦有类似http:// or objc://他们都可以监听到(像这种 http:// 并不是他们要的 ,而要的是这种 objc:// 这种,所以在跟ios通信时候,都必须这种规则 objc://…。而href=”#”代表的是本地页面[页面跳转到页面本身]。如此就能解释了之前出现问题了:ios可以监听到<a href="#">点击</a>这种链接,从而使得页面被刷新。


那么很疑惑,为何Android平台没有该问题?最后,也更进一步的疑问:JavaScript中语句最后的分号是可以缺省的,那为何要使用javascript:;而不是javascript:呢?是习惯还是规范,我也很疑惑!我也很疑惑!我也很疑惑!(重要的事情说三遍)

具有代码洁癖的coder们,没事多写一个分号,圣洁的精神世界杯玷污了,怎么能忍受的了呢?这又不是多多语句,不写分号可能会出现意想不到的情况!(很认同,原话出自:张鑫旭


此段15-08-19 20:06更新: 今日在博客园~神人唯吾的标签的href和onclick属性这篇文章中看到了一个说法:

尽量不要用javascript:协议做为A的href属性,这样不仅会导致不必要的触发window.onbeforeunload事件,在IE里面更会使gif动画图片停止播放。

这也许是大家默认使用’javascript:;’的一个原因,个中原委,有待于进一步的去摸索。

总结:#包含了一个位置信息默认的锚是#top 也就是网页的上端; 而javascript:void(0)仅仅表示一个死链接,没有任何信息。作用类同~javascript:; 而javascript:会导致不必要的触发window.onbeforeunload事件等。 故此:此处当不依靠href属性做页面跳转时候,最好还是用javascript:;更优一点。


Gui求指点,欢求吐槽!

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2015-08-15,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
九、知识拓展
1、<a href="javascript:js_method();></a>"`
Qwe7
2022/06/18
9780
html a标签跳转_点击a标签不进行跳转
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/170170.html原文链接:https://javaforall.cn
全栈程序员站长
2022/09/21
3.5K0
body标签中相关标签
字体标签包含:h1~h6、<font>、<u>、<b>、<strong><em>、<sup>、<sub>
py3study
2018/08/03
4.7K0
body标签中相关标签
onbeforeunload事件被a链接触发的问题
onbeforeunload本身并非W3C DOM-Event标准事件,只不过在很多时候国内的流氓做法就是离开页面,直接弹出收藏本网页的提示(虽然我很讨厌这种做法,但事实上很多公司一直都在这样默默地强奸用户…)
meteoric
2018/11/16
2K0
超链接标签
哈喽,亲爱的小伙伴们,好久没见啦,最近忙于项目的事情,所以并没有按时间发布新的文章,但是对于之前写的文章,我都有新的补充,尽量做到最全面和最易懂,那么这篇文章我就带大家了解一下什么是超链接标签。
守护最温柔的金木
2020/08/31
2.6K0
超链接标签
前端学习(1)~html标签讲解(一)
html全称为HyperText Markup Language,译为超文本标记语言,不是一种编程语言,是一种描述性的标记语言,用于描述超文本中内容的显示方式。
Vincent-yuan
2020/02/18
1.4K0
前端学习(1)~html标签讲解(一)
【前端】HTML标签
本文主要在初学HTML时,对常用标签做一些记录。主要是标签的使用,以及效果展示。目的在于有个大概的认识:有什么标签?能做什么?
Gavin-ZYX
2019/03/04
2.2K0
【前端】HTML标签
我们应该知道的标签
版权声明:本文为博主原创文章,欢迎转载,转载请注明出处。 https://blog.csdn.net/FE_dev/article/details/70767206
FEWY
2019/05/27
1.6K0
HTML 基础
本文介绍了HTML的基础知识和常见标签,包括<html>、<head>、<body>、<h1>到<h6>、<p>、<ul>、<ol>、<li>、<table>、<tr>、<th>和<td>以及<a>、<img>、<hr>、<br>、<span>和<div>等标签。
静默虚空
2018/01/05
2.5K0
html常用标签
title也是有助于SEO搜索引擎优化的 HTML不是依靠缩进来表示嵌套的,就是看标签的包裹关系。 HTML中所有的文字之间,如果有空格、换行、tab都将被折叠为一个空格显示。
Demo_Yang
2018/10/15
5.4K0
HTML基础
一 html html结构 !DOCTYPE html> 告诉浏览器使用什么样的html或者xhtml来解析html文档 <html></html>是文档的开始标记和结束标记。此元素告诉浏览器其自身是
用户1214487
2018/01/24
1.6K0
HTML基础
跨平台移动APP开发进阶(二):HTML5+、mui开发移动app教程[通俗易懂]
通过 HTML5 开发移动App 时,会发现HTML5 很多能力不具备。为弥补HTML5 能力的不足,在W3C 中国的指导下成立了www.HTML5Plus.org组织,推出HTML5+规范。
全栈程序员站长
2022/09/03
4.6K0
跨平台移动APP开发进阶(二):HTML5+、mui开发移动app教程[通俗易懂]
HTML标签(一)
每个网页都会有一个基本的结构标签(也称为骨架标签),页面内容也是在这些基本标签上书写。 HTML页面也称为 HTML 文档.
P_M_P
2024/01/18
4010
HTML标签(一)
HTML
浏览器(browser application)是用来访问和浏览万维网页面的客户端软件,是显示、运行网页的平台。
用户9615083
2022/12/25
3.8K0
HTML
前端入门学习--HTML
写在前面。 前端知识真的还是比较有用的。一直要把前端的学习提上日程,因为各种事情各种拖延,写爬虫的时候也是捎带学习前端的东西,还是需要系统的了解下。 All from W3school.
一点儿也不潇洒
2018/08/07
13.3K0
HTML常用文本标记,超级链接和路径描述
在body标记里写的文本内容会直接显示在页面上,但是这样直接写文本内容的方式不太好。我们在html里写文本内容的时候尽量使用标记套住内容,类似于声明这是一个文本、体现特征,在爬取数据的时候也就可以方便的通过标记来抓取或过滤指定的数据,所以需要我们学习一些常用的文本标记。
端碗吹水
2020/09/23
2K0
HTML常用文本标记,超级链接和路径描述
网页返回顶部的几种方法
这种方法是在页面现有的标签中,使用“返回顶部”的连接的href指向顶部具有id属性的标签,以实现返回顶部的功能。这种方法,需要在页面顶部的标签中有具有id属性的标签,来实现指向顶部。亦可自定义添加。
全栈程序员站长
2022/07/08
2.6K0
网页返回顶部的几种方法
【网页搭建基石】:揭秘HTML标签的魔法世界
meta标签写在head标签中,是一个辅助标签,根据属性不一样所表示的含义也不一样,常用的有:
爱喝兽奶的熊孩子
2024/06/02
2250
【网页搭建基石】:揭秘HTML标签的魔法世界
链接中 href='#' 和 href='###' 的区别以及优缺点
     首先,<a> 标签 + onclick='{jscode}' 是很常用的一种 js 运用方式,而不使用 href='javascript:{jscode}' 是为了兼容多种浏览器对 <a> 标签的解释和处理不同。其次,使用 <a> 标签 + onclick='{jscode}'  时经常会加一个 href='###',而有时这个 href='###' 会被误写为 <a href='#'> 是因为使用者没有理解 '#' 和 '###' 的区别。      简单地说,就是说如果想定义一个空的链接,又不
deepcc
2018/05/16
1.8K0
html基本标签(慕课网)
html标签:   1、<q>标签,短文本引用(quote,引用)     注解:引用短文本,比如引用古人的一句话 ,注意引用的文本不需要再加双引号。        <q>标签的真正关键点不是它的默认
听着music睡
2018/05/18
2.4K0
相关推荐
九、知识拓展
更多 >
领券
💥开发者 MCP广场重磅上线!
精选全网热门MCP server,让你的AI更好用 🚀
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验