php target当前页面,href标签target=_blank属性的妙用

, 本文介绍了如何巧妙地为HTML链接添加target=_blank属性,以在新窗口中打开外部链接,同时考虑用户体验和W3C标准。通过使用rel=external结合JavaScript,可以在不影响本页链接行为的情况下,仅针对外部链接开启新窗口。这种方法避免了全站链接都新开窗口的问题,同时也符合HTML4.0的strict标准。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

我们都知道 html 超链接标签 href 属性 target="_blank" 的作用是使打开的链接以新开的窗口形式出现。但是除了直接写在 href 标签里面,你还知道有其他更巧妙的给链接加 target="_blank" 的办法吗?下面作者将要和大家分享的是如何巧妙的使用 href target="_blank" 这个标签。

首先来看看 target="_blank" 的用处:

php+js 实现瀑布流效果

10个不常见却非常有用的PHP函数

上面的代码中,如果不加 target="_blank" 这个属性,默认均为本页直接打开,即:target="_self"。

下面说一下怎么会突然想到这个标签的吧!作者网站在当初设计时,对于链接这一块,没有做太多的想法,所有链接元素打开的方式都是_self。现在才发现存在不少问题,本站自己的内链就不说什么了,但是发表在文章内容中的链接,多半是指向别人网站的连接,而这些链接也都是直接通过_self形式打开的,这个问题就来了,用户体验度不好不说,对自己网站的流量,权重都是个挺大的损失。那怎么解决这个问题呢?我需要的是在网页页面局部实现 href 的 target="_blank" 属性,最后想出了两种方法:

(1)给这些链接一个个手动去加上target="_blank",但这个方法太笨了,太费时费力。

(2)在页面 head 标签内加上 这个标签,就一劳永逸了。这个标签可以使得页面上的所有连接都以新开窗口的形式打开。但是感觉这个用户体验度很不好,用户才浏览了几个网页就打开的全是我的网站了,这会让人很不爽,至少我是这么感觉的。而且这个在严格的W3C标准中是不标准的,至于为什么?原因很人性化,是因为外国人认为,不经过用户同意,就随便打开新窗口,是不礼貌的,不尊重用户的选择。

那这个时候该怎么办呢?

搜索了大量的资料得出 href 标签在 HTML 4.0 增加了一个新属性:rel,这个属性用来说明链接和包含此链接页面的关系,以及链接打开的目 标。rel 有许多的属性值,比如next、previous,、chapter、section 等等。这里我们可以使用 rel="external" 属性。那么原来这样写的代码:

右下角弹出广告 js,漂浮效果(兼容多浏览器)

现在要写成这样:

右下角弹出广告 js,漂浮效果(兼容多浏览器)

这是符合strict标准的方法。但是这里还必须配合一个javascript才有效,相关的代码JS如下:

function externallinks(){

if(!document.getElementsByTagName){

return;

}

var anchors=document.getElementsByTagName("a");

for(var i=0;i

var anchor=anchors[i];

if(anchor.getAttribute("href")&&anchor.getAttribute("rel")=="external"){

anchor.target="_blank";

}

}

}

window.onload=externallinks;

你可以将以上代码保存成一个.js文件(比如external.js),然后通过外部联接方法调用:

这样就解决了在网页页面局部实现 href 的 target="_blank" 属性的问题了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值