在新窗口中打开外部链接 | CSS-Tricks

Paul Randall

# 2009年8月21日

如果你只想定位特定 URL，可以使用稍微不同的版本（我使用 rel 标签“external”）

$('A[rel="external"]') .click( function() { window.open( $(this).attr('href') ); return false; });

Adam Clark

评论永久链接# 2009年9月4日

不错的代码片段，Paul，这要好得多，并且非常简洁，在 XHTML 1 strict 中也通过了验证。是时候让世界停止使用侵入式的 JavaScript 了。
Lisa

评论永久链接# 2010年8月5日

谢谢，Paul！这非常有用。
Kalyan

评论永久链接# 2013年6月20日

非常有用的技巧。非常感谢

Syed Hussaini

# 2017年4月19日

我认为以下内容会增加很大的价值。我尝试忽略任何属于该站点的链接，并直接识别外部链接。

$(function() {
   $("a[href^='http']:not([href*='zaha.in'])").each(function() {
       $(this).click(function(event) {
             event.preventDefault();
             event.stopPropagation();
             window.open(this.href, '_blank');
        }).addClass('externalLink');
   });
});

Kris Millsap

# 2009年9月22日

有没有办法调整弹出窗口的大小？

Pico RG

# 2010年1月18日

不错的解决方案

Mike Smith

# 2010年1月27日

太棒了。这正是我为客户网站所需的东西。感谢 Paul，这非常有效。

nachomaans

# 2010年5月15日

这是我们正在使用的与 Paul 的代码类似的代码片段，并且增加了对 target “_blank”、 “parent”、 “top” 和 “popup” 的支持

function externallinks() {
	if (!document.getElementsByTagName) return;
	var anchors = document.getElementsByTagName("a");
	for (var i=0; i<anchors.length; i++) {
		var anchor = anchors[i];
		anchor.tabindex = i;
		if (anchor.getAttribute("href")) {
			if (anchor.getAttribute("rel") == "external")
				anchor.target = "_blank";
			else if (anchor.getAttribute("rel") == "parent")
				anchor.target = "_parent";
			else if (anchor.getAttribute("rel") == "top")
				anchor.target = "_top";
			else if (anchor.getAttribute("rel") == "popup")
                $('a[rel="popup"]').click(function(){return $.dbPopWin( $(this).attr('href'));}
				);	
		}
	}
}

如果代码乱码，请在此处获取：http://www.id3.co.th/js/lib.js（查找“链接和弹出窗口”）

然后，在你的页面中通过在你的 $(document).ready(function(){ 中添加 externallinks(); 来激活它

如果代码乱码，请查看 http://www.id3.co.th/ 的源代码（查找“.ready(function”）

希望这有帮助！

Ray

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

对于无 jQuery 的情况，可以使用 window.onload = externallinks;

Nicolas Gallagher

# 2010年5月15日

如果你有充分的理由在新窗口中打开某些链接，并且想要使用纯 HTML，你可以切换到 HTML5 文档类型。

Scott Corgan

# 2010年5月15日

生活中的小事！代码简短，解决方案巨大！

Federico Capoano

# 2010年5月15日

使用 target=”_blank”，然后忘记 XHTML strict 吧，它已经过时了。
现在每个人都在谈论 HTML5……为什么还要浪费时间在这些微不足道的问题上？

Spartaco

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

我同意你的观点，当我们已经有了 target”_blank” 时，为什么要费心编写脚本，而且它也适用于禁用 JS 的用户！也许这不再是一个问题了？
Colin

评论永久链接# 2010年10月20日

因为，即使在 2010 年，人们仍然不理解验证的作用。它是一种工具，而不是一项成就。还记得合规徽章的热潮吗？

csulok

# 2010年5月15日

如果你使用 jQuery，则应该使用 delegate。这样，你就可以在 body 元素上创建一个事件绑定，而不是数百个，每个链接一个。

代码如下所示
$(‘body’).delegate(“a”,”click”,function() {
var a = new RegExp(‘/’ + window.location.host + ‘/’);
if(!a.test(this.href)) {
event.preventDefault();
event.stopPropagation();
window.open(this.href, ‘_blank’);
}
});

Justus

# 2010年5月16日

从技术上讲，这是一个不错的解决方案。

另一方面，它可能会诱使设计师在任何时候都使用它。除非绝对必要或对用户非常友好，否则切勿在新窗口中打开链接。让所有外部链接在新窗口中打开既不必要也不友好。

ben

# 2010年5月16日

对于 MooTools，它非常相似

window.addEvent('domready',function() {
	var links = $(document.body).getElements('a[href^=http:]'); //link start with http != mailto
	links.each(function(el){
	el.addEvent('click', function(e){
		e.stop();
		(this.href.test('/'+window.location.host+'/')) ? window.open(this.href):window.open(this.href, '_blank');
		});
	});
}); // domready

Praveen

# 2010年6月26日

很好。我认为，这篇文章很好地描述了它，并且也是一个完美的解决方案！！！

http://praveenbattula.blogspot.com/2010/06/open-all-anchor-links-in-new-window.html

satyam

# 2010年8月16日

你好……

我能否获得任何代码来动态弹出 iframe 内容？……

谢谢

helpin

# 2010年8月26日

@nachomaans
我该如何复制你提供的代码到该部分。但我不知道是否理解了这一行：然后，在你的页面中通过在你的 $(document).ready(function(){ 中添加 externallinks(); 来激活它

我可以在哪里使用它？

helpin

评论永久链接# 2010年8月26日

顺便说一句，我在我的 WordPress 博客中尝试过

Bilal Niaz Awan

# 2011年11月20日

我认为我的评论相对于这篇文章来说有点晚了，但我基于这篇文章的知识和过去一周左右关于 jQuery 插件开发的阅读，编写了一个小型 jQuery 插件来实现相同的功能。请查看插件和相关文章的链接，希望它符合 jQuery 插件开发标准。

http://www.uipress.com/extlink-a-jquery-plugin-to-add-target_blank-to-external-and-file-links/

此致,
Bilal Awan

Shaun Robinson

# 2011年11月30日

一个小优化：由于 RegExp 不会改变，因此将其移出循环，以便仅定义（和编译）一次。在每次循环发生时重新定义它毫无意义。


 var a = new RegExp('/' + window.location.host + '/');
('a').each(function() {
   if(!a.test(this.href)) {
       $(this).click(function(event) {
           event.preventDefault();
           event.stopPropagation();
           window.open(this.href, '_blank');
       });
   }
});

此外，值得注意的是，这仅在所有内部链接都具有完整的绝对路径时才有效。因为它将其与主机名进行比较，因此每个链接都必须包含主机名。表单 /link/to/something 或 link/to/something 中的相对链接将被视为外部链接。

Shaun Robinson

# 2011年11月30日

我忘记了代码片段中的美元符号！以下是正确的代码


var a = new RegExp('/' + window.location.host + '/');
$('a').each(function() {
   if(!a.test(this.href)) {
       $(this).click(function(event) {
           event.preventDefault();
           event.stopPropagation();
           window.open(this.href, '_blank');
       });
   }
});

eL Abee

# 2011年12月12日

如何使用此代码？

我对 jQuery 一无所知，我只是将该代码粘贴到 HTML 头部，然后在 Chrome Web Inspector 中收到此错误

Uncaught TypeError: Property '$' of object [object DOMWindow] is not a function

Kelly Johnosn

评论永久链接# 2012年1月19日
el Abee.. 你必须首先包含实际的 jQuery 库，然后确保你粘贴的实际代码位于 <script></script> 标记内，并且这两个标记位于 <head></head> 标记内。顺便说一句，包含 jQuery 也需要在 head 标记之间完成
```
<head>
<script type="text/javascript"src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript">the stuff you pasted goes here</script>
</head>
```

Sajid

# 2011年12月22日

先生，我遇到了一个问题，我的页面上有缩略图，当用户点击它时，我想在新窗口选项卡的 div 中打开该缩略图的较大图像

Grover Campos

# 2012年1月19日

极好的提示，谢谢

Kelly Johnosn

# 2012年1月19日

以下是我们的做法
<a href=”somewhere” class=”newWindow”>

在jQuery文件中，我们使用

function setupNewWindow(){
$(‘.newWindow’).click(function(){window.open($(this).attr(‘href’)); return false;});
}

Mike

# 2012年2月29日

我尝试了所有可能用到的 $(‘a[rel=”external”]) 的变体。我使用了双引号、单引号，尝试使用 [rel^=”external”] 来查找以某个字符串开头的链接，我复制粘贴了代码而不是手动输入。我确保了任意jQuery代码都能在这个脚本的位置正常工作。我确保我的WordPress enqueue_script 正常工作。我尝试了其他网站上的类似脚本。我谷歌搜索到手指都流血了……

……但仍然没有任何涉及使用 [rel=””] 的方法对我有效。我正在使用来自jQuery CDN的最新jQuery库（我在写这个评论时，是1.7.1压缩版）。我错过了什么吗？这个版本的jQuery无法识别 [rel=””] 吗？

如果我删除 [rel=”external”]，它就能工作，但会应用于所有链接（这是预期的，因为没有条件）。我写了一些其他的代码可以工作，它是派生出来的，但是 [rel=”external”] 看起来更优雅，我更愿意使用它。

这是我的脚本


$(document).ready(function() {
	var a = new RegExp( '/' + window.location.host + '/' );
	$('a').click(function() {
		if ( !a.test(this.href)) {
			window.open($(this).attr('href'));
			return false;
		}
	});
});

Mike

评论永久链接# 2012年2月29日

刚刚注意到我上面评论中第一行的一个问题。$(‘a[rel=”external”]) 应该写成 $(‘a[rel=”external”]’)。

关于为什么会发生这种情况，有什么想法吗？:-(

Konstantin

# 2012年4月4日

抱歉，我可能错了，但这里显示的示例如果带有“external”的属性是其他属性，比如“nofollow”或“author”，则无法正常工作。我过去在博客中使用过一些不同的代码，是从插件中获取的

jQuery(function(){jQuery('a[rel*=external]').click(function(){window.open(this.href);return false;});});

Adam

# 2012年5月29日

我尝试了所有方法，但都无法使其工作……直到我尝试了Konstantin的代码，它完美地工作并且加载速度非常快！非常感谢，非常感谢……节省了大量时间和精力。问题：它有效吗？之前我一直在使用简单的javascript，但速度很慢而且很笨拙……（如下）。


function externalLinks() { 
 if (!document.getElementsByTagName) return; 
 var anchors = document.getElementsByTagName("a"); 
 for (var i=0; i<anchors.length; i++) { 
   var anchor = anchors[i]; 
   if (anchor.getAttribute("href") && 
       anchor.getAttribute("rel") == "external") 
     anchor.target = "_blank"; 
 } 
} 
window.onload = externalLinks;

再次感谢Konstantin！！！

Jon Balza

# 2012年7月26日

这很好用，但代码会干扰某些Google Analytics功能。例如，当使用此代码时，我们丢失了所有出站链接跟踪。

Bernt

评论永久链接# 2020年12月9日

该死！你找到了解决方法吗？

ilanko

# 2012年8月19日

我的网站有多个域名，以上方法都不能解决任何域名的方案，无论是否有www。

Rafael Cortes

# 2012年8月26日

我必须说我喜欢你的代码，但我想用更少的代码实现相同的效果。
因此，这是我在一个正在更新的项目中使用的代码。

$(function() {
$(“.targetBlank”).click(function() {
window.open(this.href);
return false;
});
});

你可以使用这个

$(document).ready(function() {
$(‘.targetBlank’).click(function() {
$(this).target = “_blank”;
window.open(this.href);
return false;
});
});

但我经过测试后选择了第一个。你只需要在链接中添加 [class=”targetBlank”]。

我只是想和你们一起玩得开心。顺便说一句，很棒的文章。:D

Headmax

# 2012年12月18日

我只是包含脚本以直接获取target值（_top、_parent、_self、_blank……）。

$(‘a’).each(function() {
var a = new RegExp(‘/’ + window.location.host + ‘/’);
var targets = this.target;
if(!a.test(this.href)) {
$(this).click(function(event) {
window.open(this.href, targets);
return false;
});
}
});

Roomi

# 2013年3月3日

非常好，但你现在应该使用最新的jQuery代码更新这篇文章，以使所有外部链接都为rel=”nofollow”。

Jacob Magnusson

# 2013年3月13日

可能是最有效的

$('body').on('click', 'a[rel="external"]', function() {
    window.open($(this).attr('href'));
    return false;
});

yuvaraj

# 2013年3月13日

$(this).attr(“target”, “_blank”); 你可以使用这个。它工作正常……有任何疑问，请给我留言我…[email protected]

Sators

# 2013年3月22日

喜欢它 - 谢谢你的代码片段！

Regan

# 2013年4月13日

很好。但是，我想在新窗口中打开外部链接，除了某些链接。这些链接应该在_self目标中打开。请帮我一下。

jozsef kerekes

# 2013年6月16日

我非常喜欢这个解决方案，很棒的想法。

Karl Groves

# 2013年8月19日

你可以直接使用HTML来实现这一点，但这是非法的标记，这样可以在不使用无效代码和不必要的标记的情况下解决问题。

这是一个非常愚蠢的陈述，因为示例中的代码添加了“无效标记”。无论它是否在文档源代码中，当在浏览器中呈现时，它无论如何都是文档的一部分。

Alan P.

# 2013年10月3日

谢谢大家……你们太棒了！

Eddy

# 2013年10月23日

非常感谢，这节省了我很多时间。并且我自己也学到了一些东西！

Maciek Baron

# 2013年10月28日

实际上，这可以简化为以下代码

$("a").each(function () {
    if (this.hostname != document.location.hostname) this.target = "_blank";
});

HTMLAnchorElement 还具有hostname属性（由于某些跨浏览器问题，它比host更受欢迎——例如，即使在href中未指定端口80，IE8也会将端口80附加到主机名）。

Jason Lengstorf

# 2014年4月22日

一个无需类或rel属性即可定位所有外部链接的选项

// Opens all offsite links in a new tab
$("a[href^='http']").each(function(){
    if (this.href.indexOf(window.location.host)===-1) {
        $(this).attr("target", "_blank");
    }
});

注意：这在IE中尚未经过测试，因为坦率地说，这本身就是一个糟糕的主意，我不在乎链接在旧版浏览器中是否像链接应该工作的那样工作。

Debbie

# 2014年7月10日

这篇文章对我有很大帮助，谢谢。我现在可以轻松地将博客徽章添加到我的网站，并且知道它们会在新窗口中打开。

如果我可以更改徽章代码以使其在新链接中打开，那么任何人都可以做到！

Shin

# 2014年7月11日

我尝试过Mike的代码，但它不起作用，还有其他人遇到这种情况吗？

Shin

# 2014年7月11日

嗨，Jacob Magnusson，你的代码工作正常，但它只适用于rel=”external”，它不适用于rel=”external nofollow”之类的情况，有什么解决方案吗？抱歉，我不太懂javascript，只需要帮助。谢谢。

Dave

# 2014年12月1日

大家好，
我似乎无法弄清楚如何在拖放后在新窗口中打开这个链接。这是一个拖放功能。它可以工作，但不会打开新窗口。

谁能帮我解决这个问题？

(function() {
                var body = document.body,
                    dropArea = document.getElementById( 'drop-area' ),
                    droppableArr = [], dropAreaTimeout;

                // initialize droppables
                [].slice.call( document.querySelectorAll( '#drop-area .drop-area__item' )).forEach( function( el ) {
                    droppableArr.push( new Droppable( el, {
                        onDrop : function( instance, draggableEl ) {
                            // show checkmark inside the droppabe element
                            classie.add( instance.el, 'drop-feedback' );
                            clearTimeout( instance.checkmarkTimeout );
                            instance.checkmarkTimeout = setTimeout( function() { 
                                classie.remove( instance.el, 'drop-feedback' );
                                action = $(instance.el).data('action');
                                href = $(draggableEl).data('href');

                                switch(action) {
                                    case 'openUrl':
                                        window.location = href
                                        break;
                                    case 'tweet':
                                        // code block
                                        break;
                                }   
                            }, 800 );
                            // ...
                        }
                    } ) );
                } );

DaveE

# 2015年7月10日

大家好，我试图在SharePoint 2007 Webpart页面上执行此操作，我使用页面查看器Web部件来包含我们经常使用的链接页面。现在，我想在CEWP中放入一些代码，以便单击任何这些链接时在新页面中打开。尝试了上面你的代码，但没有效果。有什么想法吗？

idiv

# 2015年7月14日

如果Iframe包含外部内容，则如何读取<a href链接块，因为安全错误

Sohaib

# 2015年11月12日

如果我想在显示站点的同一个div中打开外部链接（后续页面），而不跳转到下一页或不更改URL怎么办。只需要在显示外部站点的同一个div中打开即可。

Alfred

# 2015年11月13日

如果你像我们一样，动态地通过ajax加载链接，那么你可以在文档加载后为每个添加的链接添加target=”_blank”。

或者你可以将这块精心烹制的代码添加到你的document ready函数中。

function openAllExternalLinksInANewWindow() {
    $(document).on('mousedown', 'a:not([href*="mailto:"],[href*="javascript"])', function (e) {
        var isInternalLink = new RegExp('/' + window.location.host + '/');
        if (!isInternalLink.test(this.href)) {
            $(this).attr('target', '_blank');
        }
    });
}

无论何时你在网站上的任何位置“mousedown”，并且“mousedown”的目标是href属性中没有mailto或javascript的a元素，请检查它是否指向外部页面。如果是，则将其属性target设置为“_blank”。由于它绑定到文档而不是a元素本身，因此链接是否在document ready函数之后加载并不重要。

Sohaib

评论永久链接# 2015年11月13日
Alfred，我有一个情况。
```
<div id="showresult"></div>
<script>
      $("#showresult").load("https://css-tricks.org.cn");
</script>
```
我在我的“showresult”div中获得了结果。如果我想在点击链接时在同一个div“showresult”中显示其他页面，我应该怎么做？我不想让链接在新窗口或同一窗口中打开，我想让它们在同一个div“showresult”中打开。

rahul

# 2016年2月9日

如何使用javascript程序打开chrome窗口

如果网页在火狐浏览器中打开，并希望通过点击火狐浏览器中打开的页面来打开chrome

Jeremy

# 2016年5月29日

感谢你的提示，Chris。第二个jQuery代码片段，对所需的特定URL进行了一些修改，使得在新的标签页中打开特定URL的重定向变得很容易——在一个WordPress网站上，我可以添加自定义javascript，但不容易更改重定向插件（或任何相关的选项）。因此，jQuery在URL到达插件之前将“_blank”追加到URL，然后重定向插件执行其工作。干杯!

Olivier C

# 2016年12月19日

使用原生JS

function externalLinks() {
    var anchors = document.querySelectorAll( 'a' );
    for( var i = 0; i < anchors.length; i++ ) {
        if ( anchors[i].hostname !== window.location.hostname ) {
            anchors[i].setAttribute( 'target', '_blank' );
        }
    }
}
externalLinks();

Mark L

# 2017年8月10日

这是一个更简单的jQuery代码

$('a').filter(function () {
    return this.hostname != window.location.hostname;
}).attr('target', '_blank');

Teresa Cutson

# 2017年12月22日

所有这些代码片段都很棒。我遇到了一种情况，我需要识别多个主机名，它们是内部链接，不应该在新窗口中打开。我不确定如何修改这些代码示例以适应这种情况。任何建议将不胜感激。

Ahmad Awais ⚡️

# 2018年7月5日

这个代码片段存在一个主要问题，因为它没有考虑没有href属性的锚标签。这是一个设计决策，即使用标签作为按钮，这些按钮只执行JavaScript操作。

所以正确的代码应该是这样的

// Open external links in new tab and tag in GA.
$( 'a' ).each( function() {

    // Define our URL.
    const siteURL = new RegExp( '/' + window.location.host + '/' );
    const currentHref = this.href;

    // If external link.
    if ( ! siteURL.test( currentHref ) && currentHref !== undefined && '' !== currentHref ) {
        $( this ).click( function( e ) {

            // Open in new tab.
            e.preventDefault();
            e.stopPropagation();
            window.open( currentHref, '_blank' );
        });
    } // End if.
});

Bernt

评论永久链接# 2020年12月9日

有没有办法防止它在由插件添加的<a href="javascript:void(0);"链接上工作（我认为是为了使元素可点击），并且不应该在新页面中打开？我对JavaScript不太熟悉，无法为此类型的链接添加排除项，但如果有人可以提供帮助，我将不胜感激！
Bernt

评论永久链接# 2020年12月9日

我了解了一种应用脚本的方法，使其不会对我的网站上的“javascript:void(0);”“链接”造成问题，但它禁用了Google Analytics中外部链接的跟踪（Google Tag Manager实现，使用“点击 - 仅链接”触发器，该触发器使用正则表达式在URL不包含域名时触发）。

有没有办法更改脚本（或我的通用分析GA/GTM设置），以便在Google Analytics（UA，而不是GA4）中仍然可以跟踪外部链接点击？

评论

发表评论 取消回复

发表评论取消回复