为rel=external添加上target=”_blank”,实现在新窗口打开链接

如果需要在新窗口中打开链接,我们使用的方法是在a上加上taget=“_blank”,但这是不符合w3c的规范,在使用严格的DOCTYPE(xhtml1-strict.dtd)校验时,会提示“there is no attribute target for this element(in this HTML version)”的错误信息。

所以很多老外写的东西基本上就不会出现taget=“_blank”,就比如我现在使用的这个wordpress自带主题一样,他们替换的方案是使用HTML4.0新增的标签rel来表示,rel是用来表明链接和包含此链接页面的关系,以及链接打开的目标。rel有许多的属性值,比如next、previous,、chapter、section等等,还有我们用来拒绝搜索引擎蜘蛛向下爬行的nofollow(这一点很重要,在wordpress中,几乎所有的评论中的用户名的链接都是加了rel=nofollow的,所以想通过在博客中添加评论来增加外链都是徒劳的)。而我们现在要使用的就是rel=”external”属性,用来表示链接将在新窗口中打开。当然,这只是符合strict标准的方法,而并没有真正实现在新窗口开打链接,还需要javasscript的支持。

思路,在页面载入以后,将rel含有external的a标签,通过js加上target=”_blank“。下面提供jquery方法,代码如下:

<script type="text/javascript">
	jQuery(function($){
		//external加上target="_blank"
		$("a[rel*=external]").attr("target","_blank");
	});
</script>

以上只是jquery的实现方式,也是本博使用的方法,js原生方法如下:

<script type="text/javascript">
	function externalLinks() {
		if (!document.getElementsByTagName) return;
			var anchors = document.getElementsByTagName("a");
			for (var i=0; i<ANCHORS.LENGTH; i++) {
			var anchor = anchors;
			if (anchor.getAttribute(“href”) &&
			anchor.getAttribute(“rel”) == “external”)
			anchor.target = "_blank";
		}
	}
	window.onload = externalLinks;
</script>

 

马上分享给你的朋友吧~

为rel=external添加上target=”_blank”,实现在新窗口打开链接》上有 2 条评论

  1. 为嘛我的博客搬家后,使用自定义的链接不管用了,都是404…,只好恢复到最初的了

    • 这个需要服务器支持PHP mod_rewrite模块!如果你后台确实设置和自定义的固定连接。并且在你的wwwroot目录下,有文件名为.htaccess的文件,那就需要找你的空间运营商沟通一下了。

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>