利用js让用户控制是否在新窗口打开链接

该功能原理为遍历所有的a标签,checkbox选中是把所有的target设为”_blank”,反之设为空值。

代码由两部分组成,首先是js部分,如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript">
function check(){
	var links = document.getElementsByTagName("a"); //获得所有a标签
	if(document.getElementById("checkbox").checked){
	//选中状态把所有链接target设为"_blank"
		for(var i=0;i<links.length;i++){
			links[i].target = "_blank";
		}
	}else{//非选中状态设空
		for(var i=0;i<links.length;i++){
			links[i].target = "";
		}
	}
}
</script>

然后是一个checkbox,也可以换成别的,例如按钮或者个性的图片,这里以checkbox举例,因为相比checkbox更容易获得状态,演示看起来更简单清晰,代码如下:

1
2
3
4
<p>
<input type="checkbox" name="checkbox" onchange="check()" id="checkbox" />
<label for="checkbox">是否在新窗口打开</label>
</p>

在适当为位置插入这两部分代码,就可以做到当打勾是该页所有链接都在新窗口打开,反之亦然。

通常这个功能放在页头或页尾,方便对整站的控制,也可以设置cookie来记住用户的选择。

测试地址:www.apieye.com/plus/70.html

本文固定链接: https://www.apieye.com/70.html | APIEYE

该日志由 Jazzy 于2012年08月20日发表在 JavaScript, web基础 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: 利用js让用户控制是否在新窗口打开链接 | APIEYE
关键字: ,

利用js让用户控制是否在新窗口打开链接:等您坐沙发呢!

发表评论

您必须 [ 登录 ] 才能发表留言!