颜林林的个人网站

Linlin Yan's Personal Website

关于用新窗口打开链接

2022-04-09 09:34
#前端
#用户体验

前言

最近重新整理个人网站，遇到个让人纠结的问题。

由于是用 markdown 来写作，所以其中自动生成的超链接，都是如下的最基本实现：

将

1

[xxx](yyy)

转变为：

1

<a href="xxx">yyy</a>

这样的链接，默认都是在当前浏览器窗口打开新地址。如果是非本网站的“外部链接”，希望能自动打开新窗口（增加一个target="_blank"属性）呢？

那就不能使用 markdown 语法，而得手工写 html 语句：

1

<a href="xxx" target="_blank">yyy</a>

CSS 相关实现

针对这样的“外部链接”，能否在样式上有所区别，从而让用户知道点击当前链接后，内容会展示到新窗口中呢？

这就可用用上 CSS 中的按照属性选择：

1

a[target="_blank"]:after {}

比如，可以追加一段文字：

1
2
3

a[target="_blank"]:after {
    content: " (external)";
}

或者追加一个外部图标：

1
2
3

a[target="_blank"]:after {
    content: url(IMAGEURL);
}

JavaScript 相关实现

如果希望自动对这类链接“target="_blank"”，则需要通过 JavaScript 来实现：

1
2
3
4
5
6
7
8

window.onload = function(){
    var links = document.getElementsByTagName('a');
    for (var i in links) {
        if (links[i].hostname != window.location.hostname) {
            links[i].setAttribute('target', '_blank');
        }
    }
}

权衡及结论

关于“用新窗口打开链接”（target="_blank"）的做法，也有很多反对声音。其中一种理由是：这会改变浏览器的默认行为。本来用户可以根据自己的喜好，自行决定是否在当前窗口打开该链接（当然，浏览器通常还可以选择在新标签页或新应用程序窗口打开）。而一旦设置了这个属性，那就没法选择本窗口了。

上面这个理由几乎说服了我。但考虑再三，觉得很多非本网站的外链接，在新窗口打开确实也是大概率的选择。从用户体验的角度，尽量降低用户的额外操作（如使用右键选择打开链接的方式），也是合理的。加上通过 CSS 配置使外部链接有清晰的区分，用户对自己的点击行为的后果也合理的预期，其实就足够了。

最终，我采用了上面提及的 CSS + JavaScript 的组合，来自动处理这些超链接，同时也尽量避免在书写 markdown 的过程中增加更多复杂度。

参考链接