谈新窗口打开链接的合理方式

如果标题换做“用户体验”，感觉大了些，自己毕竟不是这方面的专家，在这里只是谈谈自己的感受。

我还记得很早的时候自己学做网页制作，那时不晓得链接如何从新窗口打开，也不关心这些，因为网页 只是起到一个宣传简介的作用，后来多了友情链接这个东东，是的，那时还没有多标签多选项卡的浏览器出现，大家都用着IE6之类的窗口浏览器，于是那时候大 家养成了个习惯，就是打开一个页面，等浏览结束后下意识的去关浏览窗口，岂不知这个页面的上一页自己也需要，或者网站作者并不希望浏览者点了外部链接后就 脱离自己的网站，因为站长们认为自己网站还有更精彩的浏览者并没有发现……前端UI框架分享

正是由于这些原因，于是广大站长纷纷采用了外部链接的新窗口打开的模式，新窗口打开，无非就是采用JavaScript的window.open办法或者target=”_blank”的方法，由于后者不需要脚本支持所以实际采用多一些。这样以来似乎已经很完美了，真的是这样吗？这些网站继续培养了浏览者盲目按×关闭窗口的习惯，或许他们应该尝试着新的方式那就是按Shift加鼠标左键新窗口打开网页。

终于有一天新的标准XHTML 1.0出现了，广大站长纷纷发现原来的target=”_blank”不能通过标准了，于是大家开始思考：“我们到底做错了什么？”。我们到底做错了什么？大家可以参考这篇 《_blank开新窗口不符合标准?》大 家应该知道是怎么回事了，不加限制的开新窗口说到底是剥夺了用户的选择权，用户有权利选择是原窗口打开还是新窗口打开，我们必须将设计由以自我为中心转变 为以用户为中心，为用户考虑，但是话又说回来了，在中国这种新窗口打开的模式挺符合国情的，大家都默认并习惯了，当你把选择权交给用户时，用户突然变得不 知所措，甚至会怪罪于你的设计，你明明是为用户想的，偏偏用户不领情。

那我们究竟还要不要新开窗口，有没有比较好的做法？至少我认为MSDN的做法是值得我们借鉴的，MSDN在外部链接的旁边放置了个小图标标示着这个链接是个外部链接，但是实际还是本窗口打开的。

我们何不把这个小图标利用起来，也就是说点击链接是本窗口打开，点击旁边的小图标就新窗口打开，这样貌似这个问题到这里就合理解决了，这个解决方案很早就有了，也是我认为比较好的一个办法，当然大家如果有什么更好的方法可以和我讨论。前端UI框架分享

附加贴上自动识别并加上外部链接图标的JavaScript代码：

.代码

1. (function (){  
2. var window = this, undefined;  
3.        
4. function addListener(element, e, fn) {  
5.     if (element.addEventListener) {  
6.         element.addEventListener(e, fn, false);  
7.     } else {  
8.         element.attachEvent("on" + e, fn);  
9.     }  
10. }  
11.        
12. var outlinks =  {  
13.   protocol : /^(?:http|https|ftp|mms):(?:\/\/|\\\\)/i,  
14.   local_url : location.hostname, // 获取本地域名  
15.   icon : 'outlink.png', // 请改成自己的图标路径  
16.        
17.   set : function(obj, list) {  
18.     for (var i = 0; i < list.length; i++) {  
19.       obj.setAttribute(list[i][0], list[i][1]);  
20.     }  
21.   },  
22.   create : function(anchor) {  
23.     var space = document.createTextNode(' '),  
24.       link = document.createElement('a'),  
25.       img = document.createElement('img'),  
26.       text = '新窗口打开';  
27.        
28.     outlinks.set(link, [['href', anchor.href],  
29.               ['target', '_blank'],  
30.               ['title', text]]);  
31.     outlinks.set(img, [['alt', text],  
32.               ['src', outlinks.icon],  
33.               ['height', 13],  
34.               ['width', 13],  
35.               ['border', 0]]);  
36.     img.style.verticalAlign='middle';  
37.     link.style.background = 'none';  
38.     link.style.margin = '0';  
39.     link.style.padding = '0';  
40.     img.style.margin = '0';  
41.     img.style.padding = '0';  
42.     link.appendChild(img);  
43.     anchor.parentNode.insertBefore(space,  
44.                     anchor.nextSibling);  
45.         anchor.parentNode.insertBefore(link,  
46.                     anchor.nextSibling  
47.                     .nextSibling);  
48.   },  
49.        
50.   init : function() {  
51.     try {  
52.       var anchor,  
53.         anchors = document.getElementsByTagName('a');  
54.       for (var i=0; i<anchors.length; i++) {  
55.         anchor = anchors[i];  
56.         if (  
57.           anchor.href &&  
58.           // 跳过加了链接的图片  
59.           !anchor.getElementsByTagName('img')[0] &&  
60.           outlinks.protocol.test(anchor.href) &&  
61.           !anchor.getAttribute('target') &&  
62.           anchor.href.indexOf(outlinks.local_url) < 0) {  
63.             outlinks.create(anchor);  
64.         }  
65.     }  
66.     }catch(e) { alert(e.message);}  
67.   }  
68. }  
69.        
70. addListener(window, 'load', outlinks.init);  
71.        
72. })();