仅针对外部链接 | CSS-Tricks

技巧 #1

$('a').filter(function() {
   return this.hostname && this.hostname !== location.hostname;
}).addClass("external");

技巧 #2

$.expr[':'].external = function(obj) {
    return !obj.href.match(/^mailto\:/) && (obj.hostname != location.hostname);
};
$('a:external').addClass('external');

技巧 #3

$('a:not([href^="http://your-website.com"]):not([href^="#"]):not([href^="/"])').addClass('external');

技巧 #4

$('a').each(function() {
   var a = new RegExp('/' + window.location.host + '/');
   if (!a.test(this.href)) {
       // This is an external link
   }
});

Chordian

# 2010 年 1 月 31 日

参考 URL 不再有效。

Chris Coyier

评论永久链接# 2010 年 2 月 1 日

我想作者把它下架了……抱歉。我移除了该链接并添加了一个额外的技巧。

Jon Raasch

# 2010 年 2 月 16 日

关于哪种方法对性能最优的信息？(我猜不是 #4 heheh)

Chris Coyier

评论永久链接# 2010 年 2 月 16 日

我实际上不知道，那会很好知道。
Daniel15

评论永久链接# 2010 年 2 月 16 日

为什么 #4 在每次循环迭代时都会创建一个新的正则表达式对象？这会非常慢，因为它需要在每次迭代时解析正则表达式。我认为在循环开始之前创建一个 RegExp 会快得多。

Andy

# 2010 年 2 月 17 日

这很棒，但我刚开始使用 jQuery - 那么你如何使用这段代码？我假设它放在头部某个地方，然后有一个名为 "external" 的 CSS 样式 - 但它需要 script 标签等等吗？

Jack

# 2010 年 2 月 17 日

用 CSS 来做

a[href^=”http://”]{ /* 在这里设置外部链接样式 */ }

Andy

评论永久链接# 2010 年 2 月 17 日

不错 - 但如果你使用的是一个使用绝对 URL 的 CMS 系统（我认为 WordPress 就是这样做的？）那么这将不起作用。
Rory

评论永久链接# 2010 年 12 月 15 日

你能使用这种 CSS 技术插入这个吗？
target=”_blank”
到 href 标签中？我想在页面上找到所有外部链接并在单独的窗口中打开它们，而不是设置样式。
Mark Battistella

评论永久链接# 2012 年 4 月 1 日

以防万一有人像我一样遇到这种情况，并且想要一个纯 CSS 替代方案，这是我使用的方案

a[href*="//"]:after {content: ">"}

它主要用于相对链接，否则你自己的链接将获得 `content:">"`
Rob

评论永久链接# 2015 年 3 月 25 日

@Rory，截至 2015 年 3 月，你的问题的答案是否定的。使用纯 CSS，无法强制某些链接以特定方式打开。但是，仔细想想，这会让网站开发变得容易。

matt mcinvale

# 2011 年 2 月 15 日

为什么不使用 document.domain 而不是手动输入域名？

Jon Spencer

# 2011 年 9 月 3 日

@Rory - 你可以用这种方式做到 :)

a[target=”_blank”] { yourstyle: style !important; }

Rob

评论永久链接# 2015 年 3 月 25 日

@Jon，我认为 @Rory 问的是是否可以从 CSS 插入代码到 HTML 中，而不是如何设置样式。

tushar lapani

# 2012 年 3 月 2 日

大家好！
我这里有两个问题。
第一个是，如何防止默认选中单选按钮。

第二个是，如何在新窗口中打开当前窗口的父窗口。我使用了以下代码
window.open(‘mypage.html’ , ‘_parent’)

这段代码有什么问题？

请帮帮我！

jason kühn

# 2012 年 9 月 12 日

使用纯 CSS，你可以通过将所有链接设置为具有外部链接处理，并使用级联和属性选择器来定位和取消设置你的排除项来实现这一点。这种技术可能不适用于所有浏览器 (*ahem* 老 IE)，但当你无法完全控制标记的创建方式时 - 例如在具有不一致模块/插件的 CMS 中，这些插件会写入标记 - 并且你混合了绝对链接和相对链接，并且无法应用 `class="external"`、`rel="external"`、`target="_blank"` 等等，并且你不想依赖于 JavaScript 时，这种技术很有用。


/* target all anchors with an href attribute */
a[href] { 
	display: inline-block; 
}

/* do something special to indicate an external link */
a[href]:after { 
	content: ">";
}

/* target what you consider to be "internal" links and undo styles */
a[href*="your.domain.com"],
a[href^="/"],
a[href^="#"],
a[href^="mailto:"],
a[href^="javascript:"] {
	display: inline;
}

/* undo */
a[href*="your.domain.com"]:after,
a[href^="/"]:after,
a[href^="#"]:after,
a[href^="mailto:"]:after,
a[href^="javascript:"]:after {
	content: none;
}

ravi

# 2013 年 5 月 5 日

我试图在我的网站上打开 RSS 订阅，使其在新标签页中打开，但它不起作用，我已经尝试了一切，请帮帮我。我认为这段脚本阻止了这种情况发生。我对这方面比较陌生。你能告诉我需要在这个脚本中修改什么，以便外部链接在新标签页中打开吗？
$(document).ready(function() {
function filterPath(string) {
return string
.replace(/^\//,”)
.replace(/(index|default).[a-zA-Z]{3,4}$…
.replace(/\/$/,”);
}
var locationPath = filterPath(location.pathname);
var scrollElem = scrollableElement(‘html’, ‘body’);

$(‘a[href*=#]’).each(function() {
var thisPath = filterPath(this.pathname) || locationPath;
if ( locationPath == thisPath
&& (location.hostname == this.hostname || !this.hostname)
&& this.hash.replace(/#/,”) ) {
var $target = $(this.hash), target = this.hash;
if (target) {
var targetOffset = $target.offset().top;
$(this).click(function(event) {
event.preventDefault();
$(scrollElem).animate({scrollTop: targetOffset}, 400, function() {
location.hash = target;
});
});
}
}
});

// 使用第一个“可滚动”的元素
function scrollableElement(els) {
for (var i = 0, argLength = arguments.length; i <argLength; i++) {
var el = arguments[i],
$scrollElement = $(el);
if ($scrollElement.scrollTop()> 0) {
return el;
} else {
$scrollElement.scrollTop(1);
var isScrollable = $scrollElement.scrollTop()> 0;
$scrollElement.scrollTop(0);
if (isScrollable) {
return el;
}
}
}
return [];
}

});

site

# 2013 年 9 月 17 日

您好，感谢您的信息 - 我肯定
从这里学到了一些新东西。但是，我
在这个网站上遇到了一些技术问题，因为我之前尝试过多次重新加载网站，才能使其正常加载。
我一直想知道你的托管是否正常？不是说我抱怨，而是加载速度慢
会影响你在谷歌的排名
并可能损害你的质量得分，如果使用 AdWords 进行广告和营销。
无论如何，我将这个 RSS 添加到我的电子邮件，并会关注更多你有趣的內容。
确保你尽快更新它。

Bill Hinderman

# 2014 年 2 月 13 日

我现在正在这样处理它。


a, .link
  &[rel^="external"],
  &[rel*=" external"],
  &[target^="blank"],
  &[target*="blank "],
  &:not([href*="website.com"]),
  &:not([href^="/"]),
  &:not([href^="#"]),
  &.external {
    //external styles
  }
}

把它放在这里也是。

Vinny

# 2014 年 5 月 4 日

好吧，这很酷，但是……对于像我这样的初学者，我应该把它放在哪里以及如何放置呢？我需要它用于我正在开发的网站。如果您能为初学者提供帮助，我需要逐步指导。

谢谢。

Andrew

# 2014 年 7 月 17 日

耶！我爱它！
感谢 Chris 使用以下方法将外部链接目标整合在一起：
CSS 选择器或模块化 jQuery。

省时！

Mark

# 2015 年 1 月 21 日

如果有人还在考虑使用它，我做了一个 jsperf 性能测试
http://jsperf.com/adding-class-to-external-links

在非常有限的结果集中，技术 #1 明显最快。我省略了技术 #3（不想硬编码 URL）。技术 #4 最慢。

Sohaib

# 2015 年 11 月 12 日

如果我想在显示网站的同一 div 中打开外部网站链接（进一步的页面），而无需移动到下一页或更改 URL 怎么办？只需要在同一 div 中打开外部网站，该外部网站已经显示在那里。

Zberno

# 2016 年 2 月 9 日

@Mark：#3 的变体

$('a[href^="http://"]:not([href*="' + location.hostname + '"]), a[href^="https://"]:not([href*="' + location.hostname + '"])').addClass('external');

@Rory

$('a[href^="http://"]:not([href*="' + location.hostname + '"]), a[href^="https://"]:not([href*="' + location.hostname + '"])').attr('target','_blank');

Lydia

# 2017 年 4 月 14 日

我在 WordPress 网站上拥有 3 个特定的 URL，我想在新标签页中打开它们，最好的方法是什么？

Blessius

评论永久链接# 2022 年 8 月 11 日

对它们使用 rel "norefferer noopener" 属性。

技巧 #1

技巧 #2

技巧 #3

技巧 #4

评论

发表评论 取消回复

发表评论取消回复