JS实现站外链接打开方式选择 |
 |  Date:2008-07-04 |  View:4691最近在看一本关于优化网站的书，全名是《网站优化——通过提高WEB可用性构建用户满意的网站》，电子工业出版社07年6月出版。一看到“网站优化”很多人认为只是搜索引擎优化(SEO)，其实网站优化有很多方面，SEO只是面向搜索引擎的一方面，这本书讲的是面向网站用户的一方面。它的主要内容就是副标题的内容——通过提高WEB可用性优化自己的网站来让用户满意。整本书内容都还不错，有很多测试和调查数据，讲了一些实用的设计准则用来提高网站可用性，自己学到了不少，但就是翻译的比较差，读起来不很通畅，去豆瓣网也看到不少人抱怨它的翻译，看来不是我个人阅读能力的问题。 言归正传，现在讲讲关于站外链接的打开方式。我想国内很多网页设计师在设计网站时，对于站外链接都选择了在新窗口打开的方式，这样做的好处是：自己的站不会被外部站点替换，从而留住访问者。自己一直也这样认为，不过《网站优化》这本书上的调查和测试显示了一般访客并不像我认为的那样，他们常常关注最上层窗口而关掉其他的多余窗口，但他们又习惯用后退键来返回前一个页面，打开新窗口的方式使得后退键失效，访客会找不到你的站，打开新窗口的方法很可能起到适得其反的作用，总之该留的总会留该走的总要走。 这个问题现在也一直存在于很多网站上，前两天在smashing magazine 看到了一篇文章“Should Links Open In New Windows?”的文章，讨论的就是这个问题，我想既然我们不知道访客喜欢什么样的方式，那就给访客一个选择的权利，这也符合可用性设计的方向。www.webdesignerwall.com有一个很好的解决方法，在网站的右上方有一个link option的选择模块，让访客自己选择是否在新窗口打开站外链接。 原理是利用js来控制是否给站外链接增加target=_blank标签，方法参考：link-target-preferences 使用方法：
1下载linktarget.js文件，设置相关参数：
var url_1 = "http://www.yutheme.cn";
var url_2 = "http://yutheme.cn"; 这两个参数设置你的域名，包括不含www的网址，这样JS才能判断链接是否站外链接
var open_blank_default = false;
这个参数设置默认链接打开方式，false为站外链接默认不打开新窗口，true为站外链接默认打开新窗口；
var site_title = "yutheme";
这个参数设置你的站名用于保存cookie，并和其他的cookie区分，注意不能有空格或特殊字符。 其他代码部分不用改动
2在页面中加载linktarget.js文件，在</head>标签前加入以下代码，记住js文件路径改成你的文件路径：
<SCRIPT src="linktarget.js" type=text/javascript></SCRIPT>
3页面中加入选择代码：
<input name="linkprefs" type="checkbox" id="linkprefs" onclick="setCheckbox(document.getElementById('linkprefs').checked);" value="linkprefs" class="checkbox" />
<label for="linkprefs" title="选择是否在新窗口打开站外链接">在新窗口打开站外链接</label> <script language="JavaScript" type="text/javascript"> <!-- addEvent(window, 'load', loadLinkPrefs); --> </script> 这样就行了，你可以试试看效果如何。我再提供一个html演示页面供参考: linktargets.htm  设计 JS 站外链接 新窗口打开 Newer Articles
Older Articles
网摘: 
.text:''):(d.getSelection?d.getSelection():'');void(keyit=window.open('http://my.poco.cn/fav/storeIt.php?t='+escape(d.title)+'&u='+escape(d.location.href)+'&c='+escape(t)+'&img=http://www.h-strong.com/blog/logo.gif','keyit','scrollbars=no,width=475,height=575,status=no,resizable=yes'));keyit.focus();){kind=logo}
发表评论
|
||||||
| 几个网页设计和LOGO作品 < 上一篇 | 下一篇 > Smashing Magazine风格转换器比赛结果出笼！ |
|---|
