视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
谨慎使用javascript:void(0),为什么这样写不好
2020-11-27 20:22:43 责编:小采
文档

修正一个说法上的bug吧。对于IE6来说,点击后gif暂停bug仅仅发生在“javascript:伪协议未加分号”的情形下

<a href="javascript:void(0)">

这样写为什么不好?

我再来提供一个视角吧。

给<a>标签增加href属性,就意味着以下事情:

:link选择器可以选择到它

这个a标签可以获得焦点(可以通过tab按键访问到)

在浏览器的默认样式表中,有href属性的<a>标签才有cursor:pointer的效果(尤其是在低版本的IE上)。

绑定了onclick事件的<a>标签,尤其是它的作用是ajax请求时,基本上我们就用不上这个标签的默认行为,也连接不到的实际页面,一般而言也会在CSS里给予了这个元素的cursor等样式。这时候还要加上href属性,是为了:

让<a>够响应键盘事件并获得焦点(从而屏幕阅读器能够读出背后的内容,增强可访问性)

优雅降级,在网络连接很差,还没有加载到CSS的时候,<a>依然有手型与正常的link样式。

给<a>标签以href属性,并不连接到实际的页面的方案有:

1.<a href="#"></a>
2.<a href="#nogo"></a>
3.<a href="##"></a>
4.<a href="###"></a>
5.<a href="javascript:void(0);"></a>
6.<a href="javascript:void(0)"></a>
7.<a href="javascript:;"></a>
8.<a href="javascript:"></a>

他们的体验有细微的差别。

1,点击这个链接后,会让页面跳到头部,window.location.href末尾增加#(若window.location.href末尾没有#),除非在js里面捕获onclick事件并阻止默认事件。

2有了初步的语义。但是,如果页面里面有id为nogo的元素,点击这个链接后,锚点机制会作用,页面贴齐这个元素上缘。更详细的,详见张鑫旭的《URL锚点HTML定位技术机制、应用与问题》

3在chrome中不再默认跳转到页面头部,4在IE11中不再跳转到页面头部。见下方测试。

5~8作用相同,但使用了javascript伪协议。在IE6下面,未加分号的方案6和方案8被点击后,IE6会使得页面中的gif暂停,并且触发onbeforeunload事件(详情参考这里),IE6认作这个页面有了重定向,并abort之后所有的请求(参考这里)。所以假如你在此之后替换了一个<img>的src,IE6完全不会完成这个新的请求。

我更倾向于使用方案4。

至于语义上LZ这种<a href="javascript:void(0)">使用方式,这里已经有了足够详细的回答。我再补充一点,这种情形依然可以做到支持无障碍应用,方法请参考《WAI-ARIA无障碍网页应用属性》。

更新,我做了如下的测试:

 <p>
 <a href="#">#</a>
 </p>
 <p>
 <a href="##">##</a>
 </p>
 <p>
 <a href="###">###</a>
 </p>
 <p>
 <a href="####">####</a>
 </p>
 <p>
 <a href="#####">#####</a>
 </p>
 <script type="text/javascript">
 var n = 0 ; window.onhashchange = function(){
 alert(++n) ;
 } </script>

在IE11中,点击###、####和#####时,页面不再跳转到头部

在chrome中,点击##、###、####和#####时,页面不再跳转到头部。

但是在IE11和chrome中,点击所有的<a>都会造成地址栏的修改,并触发hashchange事件。

所以之前说的“###不会造成地址栏的改变”是错误的。

没有大规模测试其他的浏览器,这里做初步猜想:###的意义在于,这是字符数最少的,在所有的浏览器中不会导致跳转到页面头部的锚点。

这么写没什么不好的,表明该部分的外观像链接,鼠标需要手型,需要响应点击,但没有实际动作。用来替代href="#"。这种写法实质上并不算做html混杂js。

慎用void(0)

无论是用#还是void(0),有一个共同的缺点在于:这样做就让这个行为,必须启用js才能实现。别笑,虽然说大多数人是加载js的,但也不能排除连接故障等意外,或真的有少数狂人不用js。另外,js也不能被搜索引擎所跟踪,这是个需要考虑的问题。

从这个意义上讲,#甚至更差一些,因为单独的#在语义上,其实隐含着指向了网页自己,如果使用“在新标签页中打开”时就会产生迷惑。而这个问题void(0)没有。

【相关推荐】

1. 特别推荐:“php程序员工具箱”V0.1版本下载

2. 解决ie6下javascript:void(0) 无效的方法

3. Javascript中的操作符void(0)的定义与详解

4. 总结href=javascript:void(0)与href=#之间的区别

下载本文
显示全文
专题