颜林林的个人网站

关于用新窗口打开链接

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 的过程中增加更多复杂度。

参考链接