Subscribe to 无限摄影News FeedSubscribe to 无限摄影Comments

从视觉上告诉用户哪些是新开窗口的链接

十一月 17, 2008 by zhanbin  
分类：web标准

评论

现在很多人都开始研究使用css + div 布局了，所以大家应该差不多都听说过在xtml严格模式下不能使用target=’_blank’ 来打开新窗口了. 这样的规定很多人觉得没有必要,嘿嘿,当然,我也是其中之一.不过想想老外在制定这个规则的时候可能从用户角度觉得不经用户允许就新弹出一个新窗口是不对的.所以制定了这样的限制.但是,如果我们在视觉上告诉用户某一个链接是打开新窗口呢? 就像下面的简单代码就能实现.

?View Code HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 
 
<style type="text/css">
<!--
* {
margin:0;
padding:0;
}
.c {
margin:0 50px 15px 50px;
border:1px dotted #9900ff;
padding:10px;
}
a:link, a:visited {
color:#60c;
text-decoration:none;
}
a:hover {
color:#333;
}
a.external {
padding:0 7px 0 0;
background:url(2_r2_c2.gif) no-repeat right top;
}
h4{
font-size:16px;
margin-left:50px;}
blockquote{
padding:30px 0;}
-->
</style>
<script language="javascript" type="text/javascript">
function linkstyle(){
//var oj = document.getElementsByTagName('a');  //应用全页面的a 标签
var oj = document.getElementById('c').getElementsByTagName('a');//仅应用id为c的块内部的a标签
var j = 0;
var i =0;
//alert(oj.length)
//alert(oj[2].target)
while(j< =oj.length-1){
if(oj[j].target == '_blank'){
oj[j].className = 'external';
}else{
oj[j].className = '';
}
j++;
}
}
</script>
 
 
<blockquote><h4>id="c"中</h4>
<div class="c" id="c">
<p><a class="external" href="http://www.sina.com.cn" target="_blank">新开新窗口链接1</a></p>
<p><a class="" href="http://mail.sina.com.cn">本页链接</a></p>
<p><a class="external" href="http://vip.sina.com.cn" target="_blank">新开新窗口链接1</a></p>
</div>
<h4>不在id="c"中</h4>
<div class="c" id="d">
<p><a href="#" target="_blank">新开新窗口链接1</a></p>
<p><a href="#">本页链接</a></p>
<p><a href="#" target="_blank">新开新窗口链接1</a></p>
</div></blockquote>
 
 
</script></head></html>

示例：/demo/blanklink/blanklink.html

下面是符合xhtml strict 模式的新开窗口方法：

?View Code HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
* {
	margin:0;
	padding:0;
}
.c {
	margin:0 50px 15px 50px;
	border:1px dotted #9900FF;
	padding:10px;
}
a:link, a:visited {
	color:#60c;
	text-decoration:none;
}
a:hover {
	color:#333;
}
a.external {
	padding:0 7px 0 0;
	background:url(2_r2_c2.gif) no-repeat right top;
}
h4{
font-size:16px;
margin-left:50px;}
blockquote{
padding:30px 0;}
-->
</style>
 
 
<script type="text/javascript" language="javascript">
 
function outlinks() {
  if (!document.getElementsByTagName) return;
  var anchors = document.getElementById("c").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";
					anchor.className="external";
		}
  }
}
　　window.onload = outlinks;
</script>
 
 
</anchors></script></head>
<body>
<blockquote><h4>id="c"中</h4>
<div class="c" id="c">
  <p><a href="http://www.sina.com.cn" rel="external">新开新窗口链接1</a></p>
  <p><a href="http://mail.sina.com.cn">本页链接</a></p>
  <p><a href="http://vip.sina.com.cn" rel="external">新开新窗口链接1</a></p>
</div>
<h4>不在id="c"中</h4>
<div class="c" id="d">
  <p><a href="#" rel="external">新开新窗口链接1</a></p>
  <p><a href="#">本页链接</a></p>
  <p><a href="#" rel="external">新开新窗口链接1</a></p>
</div></blockquote>
</body>
</html>

示例：/demo/blanklink_strict/blanklink.html

其中：绑定windows onload 的方式可以用以下方式替换：

?View Code JAVASCRIPT
1
2
3
4
5
6

if(window.attachEvent) { //ie
	window.attachEvent("onload", outlinks);
}
else if(window.addEventListener) {
	window.addEventListener('DOMContentLoaded', outlinks, false);
}

相关内容

标签：,

评论



让我知道你的想法：(支持Gravatar头像服务)

  

  

 


         

         

5 Comments on "从视觉上告诉用户哪些是新开窗口的链接"

  1. xiaorsz on 星期一, 17th 十一 2008 5:07 下午 

    判断 target == ‘_blank’

    现在我博客里都没这个标签了，呵呵！

    回复

  2. xiaorsz on 星期二, 18th 十一 2008 10:58 上午 

    呵呵，不错！！有时间了用下！
    你的JS和CSS应该蛮厉害的吧！！希望多出点教程哈！！多学习下！！

    回复

    zhanbin Reply:
    十一月 18th, 2008 at 11:44 上午

    @xiaorsz,
    css和js都会点：） 我会逐渐把一些技巧都添加到我的博客上来的：）

    回复

  3. gambling casino on 星期天, 1st 二 2009 1:57 下午 

    Nice site really!

    回复

  4. wordpress 主题之更改超级链接样式 | Graygift@ye on 星期五, 31st 七 2009 11:35 上午 

    [...] 感谢：blade [...]