资讯专栏INFORMATION COLUMN

href的那些事

rose / 3010人阅读

摘要:看个问题此时的值是什么呢带着这样的疑问,开始今天的话题的那些事。问题分析为什么会有这个问题呢上周在项目中,会对页面标签绑定些事件,会用到内容。总结写在最后,对于的事情还不完整,欢迎补充补充。

看个问题test,此时href的值是什么呢?带着这样的疑问,开始今天的话题‘href的那些事’。

问题分析

为什么会有这个问题呢?
上周在项目中,msui会对页面a标签绑定些事件,会用到href内容。href=""这么写,就会一直报错。因为浏览器此时获取到的href的值当前页面绝对路径。此时就会导致msui内部一直报错。

href的定义

w3c的定义

The href attribute on a and area elements must have a value that is a valid URL potentially surrounded by spaces.
Note:The href attribute on a and area elements is not required; when those elements do not have href attributes they do not create hyperlinks.

翻译过来大概的意思:

a和area标签上的href属性,必须是一个有效的RUI地址
a和area标签不一定有href属性,没有href就不会触发超链接的特点

RUL

w3c的定义

A string is a valid non-empty URL if it is a valid URL but it is not the empty string.
A string is a valid URL potentially surrounded by spaces if, after stripping leading and trailing whitespace from it, it is a valid URL.
A string is a valid non-empty URL potentially surrounded by spaces if, after stripping leading and trailing whitespace from it, it is a valid non-empty URL.

挺拗口的,翻译不出来了!

可以理解其中一点就是一个合法的URL不能为空。看来这个URL可以多带带做个专题学习了。

解决问题

从href和URL上的定义就能很好的解决最开始的问题了。href=""这种写法是不合理的,浏览器自身会对此情况做些兼容,默认是页面的绝对地址了。

继续深挖href

href内容不仅仅只能是表现成链接,还有很多种用法。

锚点
头部

这种方式经常用于定位。相信很多人都知道这种用法。

script

我相信很多页面上有大量的这种代码。用href来执行脚本。

邮件
发邮件给我
tel电话
打电话给我
sms信息
发信息给我

除此之外,还支持ftp,file等。

下载文件

最后还有个技巧就是利用href来下载文件,这个是html5新增的。

最近有个需求,考虑通过前端来下载表格数据。
利用href和download属性。

这里只要将URL表现成数据格式"data:text/csv;charset=utf-8,ufeff"+表格数据。这个等完成之后,再写个详细点的教程。

总结

写在最后,对于href的事情还不完整,欢迎补充补充。

原文地址http://xiaoqiang730730.github.io/2016/07/17/href%E9%82%A3%E4%BA%9B%E4%BA%8B/

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/49948.html

相关文章

  • 浏览器端下载那些

    摘要:三浏览器方式相信大家对这个对象也不太陌生,它是标准里的一个二进制数据对象,可以与对象配合,进行文件的下载。其实这样一个简单的,就可以实现浏览器端自己的下载了。 一、背景 最近写了一个react的组件,用来做文件导出。环境是ie10+。细一点说,就是 1、读取form里的数据 2、向服务端发请求,并下载文件;要求拿到请求状态,如果出错及时反馈给用户。 第一个需求,我们借用了jquer...

    3fuyu 评论0 收藏0
  • 关于HTML那些

    摘要:标准模式的排版和运作模式都是以该浏览器支持的最高标准运行。搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重,有利于使阅读源代码的人更容易将网站分块,便于阅读,维护和理解。 HTML基础知识 meta标签 doctyp...

    Zachary 评论0 收藏0
  • cookie和session那些

    摘要:服务器生成的用以标识客户信息的一般被称为而通过一些手段获取其它用户的攻击就叫劫持设置一个搞掂了 cookie history cookie最初是由网景公司开发的,现在所有主要的浏览器都支持它. type cookie分为两种:会话cookie和持久cookie. 会话cookie是一种临时的cookie,它记录用户的访问站点的设置偏好.用户在退出浏览器就会被删除. 持久cookie是存...

    xiaoxiaozi 评论0 收藏0
  • cookie和session那些

    摘要:服务器生成的用以标识客户信息的一般被称为而通过一些手段获取其它用户的攻击就叫劫持设置一个搞掂了 cookie history cookie最初是由网景公司开发的,现在所有主要的浏览器都支持它. type cookie分为两种:会话cookie和持久cookie. 会话cookie是一种临时的cookie,它记录用户的访问站点的设置偏好.用户在退出浏览器就会被删除. 持久cookie是存...

    hedzr 评论0 收藏0
  • 聊聊BOM那些

    摘要:如果省略该参数,取默认值该方法的返回值是一个正整数,表示定时器的编号。 BOM BOM的全称是Browser Object Model,被译为浏览器对象模型BOM提供了独立于HTML页面内容,而与浏览器相关的一系列对象,主要被用于管理浏览器窗口及与浏览器窗口之间通信等功能BOM由一系列对象构成,这些对象可以简单理解为是由各个浏览器所提供的 Window对象 BOM中最核心的对象就是Wi...

    widuu 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<