关于超链接的代码……

在Baidu空间中的发现

  Baidu空间是一个功能简洁的Blog,但是它提供操作是比较方便的,一些常用的功能都使用模拟窗口作为界面,而不是要页面跳转或者新开窗口。

  刚开始用的时候空间里面没有分类,但是在创建文章页提供了一个创建分类的功能。当然,如前面提到的,这个功能是用模拟窗口作为界面。网速很慢的时候,按下创建分类的链接时惊奇地发现新开了窗口而不是弹出一个模拟窗口。

  从HTML代码里面找到了创建分类的链接代码:

程序代码 程序代码
<a href=”/grubx/creat/category/” target=”_blank” onClick=”openaddcat(’/grubx/creat/category/’);return false;” tabindex=”-1″>增加新分类</a>

  这是一种非常健壮的代码结构,onClick里面的Javascript代码执行后返回了false,相当于链接功能被屏蔽。但是,当Javascript被禁用或者onClick里面的代码执行出错时,链接功能还是正常的。当网速很慢导致openaddcat函数的代码还未被读取时,单击链接就会弹出了一个新页面。因此,用户点击这个链接之后就不会出现什么都没发生的情况,提高了用户体验。

用同样的思路进行SEO优化

  某些网站的列表页使用了AJAX进行分页,即换页的时候只刷新列表的部分,而不是整页刷新。代码可能是:

程序代码 程序代码
<a href="###" onclick="jumpPage(2)">第二页</a>

  这种方式向来有一种缺点:SEO非常糟糕。搜索引擎基本上是不认识Javascript代码的,所以它搜不到除了第一页之后的内容。按照上面的思路,需要给href加上一个有意义的链接,让搜索引擎可以搜到该页。改进如下:

程序代码 程序代码
<a href="?page=2" onclick="jumpPage(2);return false;">第二页</a>

  当然,这样写的前提是做两份页面,一份是AJAX分页时的处理请求的页面,另一份是常规分页页面。

改进

  上面的链接代码不符合HTML与Javascript分离的原则,而且在openaddcat未被读取时按下链接的时候会导致浏览器报错(虽然功能正常),改进的方法是后期动态添加事件。HTML修改如下:

程序代码 程序代码
<a href="/grubx/creat/category/" id=”newCate” target=”_blank” tabindex=”-1″>增加新分类</a>

  在页面底部写上添加事件的脚本:

程序代码 程序代码
var newCate = document.getElementById(”newCate”);
var createCategory = function(e) {
    openaddcat(’/grubx/creat/category/’);
    e = e || event;
    e.preventDefault ? e.preventDefault() : e.returnValue = false;
    return false;
};
if (newCate.addEventListener) {
    newCate.addEventListener(”click”, createCategory, false);
} else if (newCate.attachEvent) {
    newCate.attachEvent(”onclick”, createCategory);
}


[本日志由 GRUB 于 2009-04-22 09:25 PM 编辑]
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: href onClick 超链接
评论: 0 | 引用: 0
发表评论
你没有权限发表评论!