如何自动为每个_blank链接添加图标? [英] How to add an icon automatically to every _blank link?
本文介绍了如何自动为每个_blank链接添加图标?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在页脚中添加了以下脚本,自动将target =_ blank添加到每个外部链接:
I have the following script added to my footer that is automatically adding target="_blank" to every external link:
<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 但是我不能让它发挥作用。如何将其整合到我的工作脚本中?
Now I would like to extend this to a small indicator at the end of every link so that a user is aware that it is an external link and for that I found this solution: https://stackoverflow.com/a/52058198 but I cannot make it work. How to integrate this into my working script?
推荐答案
我希望这段代码可以帮到你
I hope this code will help you
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>
这篇关于如何自动为每个_blank链接添加图标?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文