javascript:void(0)和javascript:;意思详解,以及a标签的一些用法介绍
2017-01-08 13:41

 javascript:void(0)分析

    javascript:void(0)我们在a标签添加click等事件的时候经常用到a标签href属性,像下面这样

<a href='javascript:void(0);' onclick='dosomething()'>mooshine</a>

a链接的href属性由两部分组成,javascript:     void(0);

先看javascript:

javascript:是什么呢?是一种伪协议,我们熟知的几种协议有:http,https.file,ftp,telnet,tcp,udp等互联网协议,那么伪协议又是什么鬼呢?

伪装协议就如实让浏览器执行一些外部程序,或者一些内置功能,不如现在有些网站用data:(base64编码数据)来显示图片,也算是一种伪装的协议。

javascript:就是让浏览器执行一段js代码。a标签的href属性是支持协议的,同时也支持这些伪装的协议。


href='javascript:....;',首先浏览器会执行其中的js代码,然后把执行结果返回给href属性,如果结果不是undefined,则做一些操作,如打开链接,如果是undefiend,则不做任何动作。

void关键字解释

void是js中的一个操作符,虽然我们对这个操作符除了在a标签之外用的很少,但是任何版本的浏览器都支持它。

void操作符将执行一段表达式,然后返回undefined。无论表达式是什么,void操作符总是恒定返回undefined属性。

void expression;
void 0;
void (0);

void(0)中的括号不是void操作符要求的,括号是要执行的表达式的一部分,有没有括号的意思是一样的,只是一种习惯写法而已。

我们可以写一段代码测试一下void的功能

var rst=void function testvoid() {
   console.log("mooshine");
    return "mooshine";
}();
console.log(rst)

运算结果如下:

void.png

其中function函数后面加的小括号表示是自执行函数,也就变成了函数表达式,前面就可以通过void操作符来运算他了。

在函数中虽然用return语句指定返回结果,但是由于void操作符的作用,返回结果仍然是undefined。


所以我们就可以在a标签的href属性中使用javascript:void(0);来避免跳转,同时使用onclick属性做一些操作,把a标签作为一个伪button元素。

javascript:;

javascript:;的写法跟javascript:void(0);在含义上是一致的,返回的结果也是undefined,所以可以用javascript:;替代javascript:void(0); 毕竟javascript:;比javascript:void(0)少7个字符呢,反正我是比较懒,喜欢用javascript:;来设置href属性的。


a标签href的其他可能伪协议

a标签的href还有一些其他的写法用来实现一些特定功能

href="#id" 锚文本

通过#号指向同一文章中id为id的元素,并将此元素显示在浏览器视窗中,叫做“锚文本”,href="#"和href="#top"是相同的,锚点都是指向文章开头。


href="mailto:" a标签打开邮件程序

<a href="mailto:mooshine@163.com">向我发送邮件</a>


mailto:伪协议用来打开客户端的邮件程序,向指定的邮箱发送邮件。


href="tel:" a标签拨打电话

<a href="tel:8888888">88888888</a>


通过tel:伪协议,在手机端可以调用用户拨打电话的程序,并将tel中的电话号码显示为拨出号码。


a标签target属性介绍

a标签有一个target属性,用来指示浏览器打开链接的方式,此属性有几个可选值

target='_self'

在当前窗口打开链接

target='_blank'

在新窗口打开链接

target='_parent'

在frameset或者iframe嵌套的页面中,表示在父窗口打开链接,否则_parent和_self相同

target='_top'

在frameset或者iframe嵌套的页面中,表示顶层窗口,否则_top和_self相同

target='xxx'

在指定id或者name为xxx的iframe中打开窗口,这里如果要良好的兼容性,iframe的id和name的属性值都要为xxx。


a标签H5的新属性

H5中对a标签添加了一些新属性,简化我们一些功能的实现。

a标签的down属性

down属性表示一个a标签的href所指定的url地址不要作为页面打开,要作为文件下载。

<a href="images/egg.jpg" download="mooshine">下载图片</a>

down的属性的属性值会作为下载文件的文件名。此文件名允许用户修改,不过在chrome等一些浏览器会直接下载,而不会弹出另存为的对话框。

使用down属性还可以把canvas.toDataURL()的url设置为a标签的href属性,将canvas生成的图片下载到本地,免去了与服务器的交互。

a标签down属性支持性

目前a标签的down属性支持不是很完善,ie要到edge 13才支持,safari不支持,如果不是出于安全性原因的问题相信safari很快也会支持的。

很快我们就可以使用a标签的down属性来实现文件的下载功能。这多么酷炫,多么令人期待啊。


结语:

 a标签是很基础的html标签了,文中提到的用法,大家也都很熟悉,缺少的也就是对这些用法问个为什么。可能你会问,你这些都是自己知道的么,肯定不是啊,没有人生下来就知道的,我也是通过文档资料了解到的,然后自己写代码做一些测试,做深入理解。那么就是有参考文献了啊,是的,有参考文献,一般就是微软出的DHTML文档,js文档,MDN的官网,Microsoft的开发者指南官网这里几个地方。微软做的比较好,都是中文文献,就是服务器在国外,访问速度有点慢。MDN对我们国内人来说就有些差了。全是英文的,对于我这种英语水平不好的人看起来是相当费劲的,要一边看,一边查字典,不过也有好处,自己的英文词汇来那个确实也跟着看文档提升了不少。

 

原创文章,转载请注明来自:妹纸前端-www.webfront-js.com.
阅读(1230)
辛苦了,打赏喝个咖啡
微信
支付宝
妹纸前端
妹纸前端工作室 | 文章不断更新中
京ICP备16005385号-1