【前端特辑】探索a链接实践奥秘

更新时间:2023-04-07 15:27:19 阅读：评论：0

见过a标签各种“千奇百怪”的写法，也探索过它的各种用法；于是迫不及待地想要分享出来 —— 这个在我看来html中最“好玩”的一个标签。

先来康康“朴实无华”a标签：

a是行内元素！

a标签实现刷新页面和跳转刷新

你可能会想：这是个什么奇怪的需求？但是它确实发生了：笔者在一个项目中曾接到这样的需求 —— 需要在页面上有一个特定形状的按钮并给用户以提示刷新当前页面。

我首先想到的肯定是<button>啊：因为提示了“按钮”。但很快我就不这么认为了 —— 考虑到浏览器兼容性以及button原生样式问题，在每一次写button之前都至少要加这么一段代码：

margin: 0;padding: 0;/*自定义边框*/border: 0;/*消除默认点击蓝色边框效果*/outline: none;-webkit-appearence: none;

然后再去覆盖英语神话故事。
input —— 不管是 type="button" 还是 type="checkbox" 也都要进行重置。

这时候就显示出a链接的厉害了 —— 它只有一条多余的下划线，去除即可。
比如在circle.html中：

<a href="circle.html">刷新</a>

光凭上面这点可吸引不到我 —— 你可能不知道的是：a标签的target属性中是可以放具体的URL地址的 ！
它的特点是：如果浏览器已经有标签页的地址是circle.html，则点击链接并不会打开新窗口，是直接刷新已经打开的circle.html（而不是打开一个新窗口！）；如果浏览器中没有地址是circle.html的标签页，则此时target属性的行为表现类似 '_blank'。

这个特点有什么应用呢？
假如有这么个链接：

<a href="circle.html?s=list" target="_arch">成绩排名</a><!-- 或者 --><a href="circle.html?s=list" target="circle.html?s=list">成绩排名</a>

它指向一个新页面，而这个页面是你的网站某个页面答题环节的排名。根据上面的特点，你是否能想到：在每次答完题后点击提交时去触发这个链接就能跳转到排名页面 —— 不管它是否已经存在，并且刷新得到当前排名？
而不再需要Server-Sent Events或者web socket甚至是ajax轮询的使用！

比如这样：

（：如果跳转后不能刷新页面，则可把target链接中“？”及后面删掉（也就是没有arch参数）即可 —— target指向（任意）一个一样的字符串，这没什么。

a链接实现下载文件

关于这方面，笔者最早是在“canvas图片压缩”中使用，并且在遇到最近这个需求之前甚至以为这么用就足够了：
在html5时代，a标签中多了一个属性 —— download，用于下载href中的链接（在线）文件。
拿canvas来说，经过 ctx.drawImage(...) 或 ctx.fillText(...) 之后得到的是一个“类图片”格式，这时候怎么拿到href中？

js提供了一些转化为URL的方法：
canvas.toDataURL("image/png") ——对canvas
URL.createObjectURL() ——对大部分js对象
fileReader.readAsDataURL() ——对文件对象
…

var Imgload = function (domImg, filename="photo.png") {     // 创建隐藏的可下载链接    var eleLink = document.createElement('a');    eleLink.download = filename; // 设置图片名称;    eleLink.style.dis青岛1中play = 'none';    // 图片转ba64地址    var canvas = document.createElement('canvas');    var ctx = canvas.getContext('2d');    var width = domImg.naturalWidth;    var height = domImg.naturalHeight;    ctx.drawImage(domImg, 0, 0);    // 如果是或要转为PNG，则可用canvas.toDataURL('image/png')    eleLink.href = canvas.toDataURL('image/jpeg');    // 触发点击    document.body.appendChild(eleLink);    eleLink.click();    // 然后移除    document.body.removeChild(eleLink);};

类似地个人简介100字，对于其它格式的文件，可以将文本或者JS字符串信息借助Blob转换成二进制，然后，作为<a>元素的href属性，配合download属性，实现下载。

巧的是，js也提供了一些转化为blob的api：
xhr.responType="blob" ——用于ajax请求中
new Blob([...]) ——用于一般js实例（甚至是arraybuffer实例）
一般来说，blob对象被用来转化为URL！

比如：将html代码下载为html文件

/** content：文本内容 filename：下载到系统中的文件名称 */var Fileload = function (content, filename) {     // 创建隐藏的可下载链接    var eleLink = document.createElement('a');    eleLink.download = filename;    eleLink.style.display = 'none';    // 字符内容转变成blob地址    var blob = new Blob([content]);    eleLink.href = URL.createObjectURL(blob);    // 触发点击    document.body.appendChild(eleLink);    eleLink.click();    // 然后移除    document.body蛙泳皇后.removeChild(eleLink);};

当然，有些时候你并不想下载单个文件 —— 比如压缩包下载（文件夹是不可能的，这辈子都不可能(≖ ◡ ≖ ）！
「在闲逛GitHub时，发现了一个比较流批的开源项目：jszip ，可用于ZIP打包下载。（好多星星，我慕了。。。）」

a链接在某些情况下的缺陷及其替代

这个应该是比较常见的了：简单来说就是 —— 点击某个链接，跳转到对应页面。

但一般不只是这么做，否则我也不会写这篇文章了！
常见的比如一个学校的介绍div，里面有图片、名称、简介，一般这种都是出现在机构的问卷之类的活动页中，所以还能看到点赞（支持度）。就有要求了：点击整体要跳转到学校的官网，但是如果点击的是“简介”部分，就跳转到“百度百科”中。

再复杂一点的还有：点击“点赞”，跳转到投票页面、点击图片跳转到学校风光页面等等。。。

你是否知道：<a>不支持自身嵌套？

<a href="#destiny">nyist<a href="#communite">uc</a></a>

显示出来却是这样的：

同级？！

这时候，如果我们有链接嵌套的需求，就可以试试使用<area>元素（“热点区域”）！如上面所说的场景：

以前比较好的方法是通过CSS重新布局定位/浮动改变DOM结构和顺序，使链接内容变成相邻关系，虽然麻烦了点，但在语义和无障碍方面还是很好的；或者使用普通元素，用js为每个“独立元素”分配事件；或者是使用JS，点击目标区域时用 preventDefault 阻止默认事件，然后再 location.href 跳转。

实际上，还有一种更好的做法，就是<a>元素中嵌套<area>元素，可以保证DOM结构符合视觉呈现，又无需JS辅助。

比如图片热点的使用，就是借助<map>和<area>元素在图片上创造点击热点，把整个图片区域都作为点击热点，既能充分发挥<area>标签本身的特性，又没有什么兼容性问题，键盘访问等都非常良好，还可满足我们链接嵌套功能：

<img src="./img/nan.png" class="book-cover" alt="南阳理工学院" umap="#bookCover"><map id="bookCover" name="bookCover">    <area hidefocus="true" shape="rect" coords="0,0,80,107" href="/d/file/titlepic/image.baidu.com alt="南阳理工学院" target="_blank"></map>

而标题文字的链接内嵌处理则要麻烦一些。笔者的做法是：在文字前面直接放置了一个裸的<area>元素，通过CSS设置覆盖文字实现的：

<h4 class="book-title">    <area class="area" href="/d/file/titlepic/249491 target="_blank">    南阳理工学院</h4>

.book-title{ margin: 0;float: left;position: relative;}.area{ position: absolute;left: 0;top: 0;width: 100%;height: 100%;}

注意：
area的使用必须和map标签一起，且map作为父元素 -> <map> 标签用于客户端图像映射（图像映射指带有可点击区域的一幅图像），<area> 标签定义图像映射内部的区域，且<area> 元素始终嵌套在 <map> 标签内部；
<img> 标签通过 umap 属性与 <map> 元素中的 name 相关联；
<area>元素是空标签，不支持子元素，只能采用css覆盖或者伪元素（::before 等）的形式

案例代码及效果查看：JSBin在线编译器

更新↓
但是当一切“尘埃落定”，我无意中用火狐浏览器打开了这个页面：

标题和整体部分怎么跳转到一个页面去了？
上网搜查这个问题时发现张鑫旭的这篇文章 1 已有研究，并提出：Firefox浏览器不支持area标签覆盖文字（Firefox的<area>元素默认display:none，且无法重置）。

张大也提出了一种解决方法：使用透明图片覆盖的方式实现文字的链接嵌套，也就是把原本裸露的<area>换成<img>，然后再使用<area>元素创建图片热点。

<h4 class="book-title">    <img src="data:image/gif;ba64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="area" umap="mapTitle">    南阳理工学院</h4><map id="mapTitle" name="mapTitle">    <area shape="rect" coords="0,0,200,21" href="/d/file/titlepic/249491 target="_blank"></map>