LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

超链接的href 和onclick引发的思考

admin
2010年8月14日 2:25 本文热度 3888
1、在Baidu空间中的发现

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

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

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

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

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

2、用同样的思路进行SEO优化

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

<a href=”###” onclick=”jumpPage(2)”>第二页</a>

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

<a href=”?page=2″ onclick=”jumpPage(2);return false;”>第二页</a>

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

3、改进

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

<a href=”/heero0w/creat/category/” id=”newCate” target=”_blank” tabindex=”-1″>增加新分类</a>

在页面底部写上添加事件的脚本:
var newCate = document.getElementById(”newCate”);
var createCategory = function(e) {
    openaddcat(’/heero0w/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);
}


该文章在 2010/8/14 2:25:27 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2024 ClickSun All Rights Reserved