摘要
本文主要讲述了：
- 作用
- 特性值
正文
作用
<a>的rel特性主要用来声明当前文档和目标文档之间的关系。
特性值
external
超链接通往第三方网站。
nofollow
告诉搜索引擎，当前文档和目标文档没关系，也不担保其内容。搜索引擎不应该继续追踪，也不应该传递权重。
noopener
告诉浏览器，不许让目标文档通过opener访问到当前文档的上下文。
经过测试：如果使用滚轮点击<a>或右键 -> 在新标签页中打开，新标签页始终无法获得opener。此处请使用鼠标左键点击<a>。
示例：
learn_anchor/a.html
1
2
3
4
5
6
7
8
9
10
11
12
13
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<a href="b.html" target="_blank">b</a>
<a rel="noopener" href="b.html" target="_blank">noopener b</a>
</body>
</html>
|
learn_anchor/b.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<script>
console.log(opener);
</script>
</body>
</html>
|
noreferrer
告诉浏览器，不许通过请求头传递引用。
在当前文档里点击超链接跳转到目标文档时，浏览器会通过网络请求中的Referer请求头告诉目标文档的服务器，这次访问是从哪里过来的。
值得一提的是，referer其实是referrer的错误拼写。这个错误发生在 HTTP 标准制定早期，而后将错就错沿用至今。
示例：
learn_anchor/a.html
1
2
3
4
5
6
7
8
9
10
11
12
13
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<a href="b.html">b</a>
<a rel="noreferrer" href="b.html">noreferrer b</a>
</body>
</html>
|
learn_anchor/b.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<script>
console.log(document.referrer);
</script>
</body>
</html>
|
参考资料
本文对你有帮助？请支持我
支付宝
微信