(较早)« 在欢乐谷的一天
第一次参加工作笔试 »(较新)
解决站外链接代码的一个bug
2007年11月5日 |
totoro |
资讯·软件
白鸽在将幻想变为现实——让所有外部链接在新窗口打开一文中介绍了一段Javascript代码，用于在网页中出现外部链接的情况下，当浏览者点击链接时使浏览器自动在新窗口或新标签页打开目的窗口。这段代码使得写文章的时候不用再为每个可能出现的链接写一段窗口属性代码，极大的提高了效率。但是在使用过程中有一个小问题，比如本站右侧的“存档”，点击旁边的“展开收缩”链接，本来应该是在本窗口向下延伸出一段文本，但是应用了“外部链接”代码后，因为程序检测到了那个链接地址不是以“http://totoror.com”开头，所以就自动在新窗口打开了，结果在新窗口自然什么也看不到。为些对这段代码作了点小小的改动。改动结果如下：
1: <script type="text/javascript">
2: <!--
3: function setExternalLinkTarget()
4: {
5: // 从当前 url 中解析主机名
6: var locationMatch = document.location.href.match(/^(http://)?([^/]+)/i);
7: // 设置站点链接
8: var siteUrl = locationMatch[2];
9: // 获取页面上所有链接
10: var allLinks = document.getElementsByTagName('a');
11: var len = allLinks.length;
12: if(len > 0)
13: {
14: var externalLink;
15: for(i=0; i<len; i++)
16: {
17: // 设置当前链接
18: externalLink = allLinks[i];
19: //检查是否存在非标准http链接（javascript链接就是属于此类）
20: if(externalLink.href.indexOf("http")==-1)
21: {
22: //do nothing;
23: }
24: // 如果链接 href 里面发现站点链接（外部链接）
25: else if (externalLink.href.indexOf(siteUrl) == -1)
26: {
27: // 设置 target 属性
28: externalLink.setAttribute('target', '_blank');
29: }
30: }
31: }
32: }
33: window.onload = function() {
34: setExternalLinkTarget();
35: }
36: //-->
37: </script>
其中19到25行之间的内容是添加的新内容，其余不变。经测试，结果良好。
ps，以上描述的新窗口代码对IE有效，在Firefox下需设置Tab属性。不过对于使用Firefox的用户来说，是否在新窗口打开完全可以由浏览用户自己决定:)
| 基于
改得挺好，鼓个掌。不过白鸽还会让这段代码做更多的用途，嘿嘿。
[...] 近期的读者可能会奇怪白鸽没有更新博客，这其实是因为买了台新的笔记本并步入了Vista时代，而上手Vista则着实花了白鸽几天的时间。 言归正传，上回《将幻想变为现实——让所有外部链接在新窗口打开》一文实现了所有外部链接在新窗口的打开的方法，博友Totoro则更进一步地《解决站外链接代码的一个bug 》，将其改进为只在新窗口打开非Javascript代码里的链接。不过，白鸽这回给大家带来一个更大的惊喜，那就是——让任意区域的所有链接在新窗口打开。 的确，如果只需要让某个区域的所有链接在新窗口打开，那么用上回那篇文章里的代码就有些太过于浪费了，因为我们可能只需要让侧边栏里的RSS挂件里的链接或是delicious的标签云里的链接在新窗口打开。不过这两种挂件使用的都是javascript代码，所以用常规的方法是无法让它们的链接在新窗口打开的。 首先在页面头部或是侧边栏文本里加入以下代码： <script type="text/javascript"> <!-- function setExternalLinkTarget() { // 获取页面上所有链接 var allLinks = document.getElementById('newlink').getElementsByTagName('a'); var len = allLinks.length; if(len > 0) { var externalLink; for(i=0; i<len; i++) { // 设置当前链接 externalLink = allLinks[i]; // 设置 target 属性 externalLink.setAttribute('target', '_blank'); } } } window.onload = function() { setExternalLinkTarget(); } //--> </script> 接着在需要打开新窗口的任意区域对应的代码的最上面一行加上<div id="newlink">最下面一行加上</div>即可。 比如白鸽右侧侧边栏上面的delicious标签云的代码如下： [...]