javascript - 如何为每个 _blank 链接自动添加图标？

Question

我在页脚中添加了以下脚本，该脚本会自动将 target="_blank" 添加到每个外部链接：

<script type="text/javascript">
    function linkopener(a) {
    var b = a ? "_blank" : "_self";
    var c = document.links;
    for (var i = 0; i < c.length; i++) {
        if (c[i].href.search("www.mydomain.tld") == -1) {
            c[i].addEventListener("click", function () {
                    this.target = b;
            });
         }
    }
};
$(document).ready(function(){
    linkopener(true);
});
</script>

现在我想将它扩展到每个链接末尾的一个小指标，以便用户知道它是一个外部链接，为此我找到了这个解决方案：https ://stackoverflow.com/a/52058198但我不能让它工作。如何将其集成到我的工作脚本中？

标签： javascriptjqueryhtmlcss

Answer 1

我希望这段代码对你有帮助

function linkopener(a) {
    var b = a ? "_blank" : "_self";
    var c = document.links;
    for (var i = 0; i < c.length; i++) {
        if (c[i].href.search("www.mydomain.tld") == -1) {
            /*
            c[i].addEventListener("click", function () {
                    this.target = b;
            });
            */
            c[i].target = b;
            c[i].className += ' external-link' 
         }
    }
};
$(document).ready(function(){
    linkopener(true);
});

a.external-link {
  position: relative;
  padding-right: 20px;
}
a.external-link:after {
  content: '\2197';
  position: absolute;
  right: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="https://www.google.com">Google</a>
<a href="https://www.facebook.com">Facebook</a>
<a href="https://www.stackoverflow.com">StackOverflow</a>
<a href="https://www.medium.com">Medium</a>
<a href="www.mydomain.tld">My domain</a>