欢迎光临

木子屋

标题: window.location.hash在Ajax页面中的作用

作者: dnawo

日期: 2013-04-16 10:42 AM

分类: 脚本语言

内容: 众所周知，Ajax页面的特点是用一个页面来处理所有的事务，页面无需刷新，虽然这样提高了用户体验，但却存在以下不足：
引用内容·用户不能添加收藏喜欢的页面；
·导致浏览器前进、后退按钮失效；
使用window.location.hash(锚点)能很好的解决上边两个问题，下边是一个简单的示例：
复制内容到剪贴板 程序代码<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>window.location.hash在Ajax页面中的作用</title>
</head>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
.ready(function () {
var initPage1 = function () { $("#content").text("Page1"); };
var initPage2 = function () { $("#content").text("Page2"); };
var initPage3 = function () { $("#content").text("Page3"); };
//1.页面初始化
var hash = window.location.hash.toLocaleLowerCase();
switch (hash) {
case "#page1":
initPage1();
break;
case "#page2":
initPage2();
break;
case "#page3":
initPage3();
break;
default:
initPage1();
break;
}
//2.链接点击事件
.delegate("#link1", "click", initPage1);
.delegate("#link2", "click", initPage2);
.delegate("#link3", "click", initPage3);
});
</script>
<a id="link1" href="#page1">page1</a> <a id="link2" href="#page2">page2</a> <a id="link3" href="#page3">page3</a>
<div id="content"></div>
</body>
</html>
参考资料
[1].从QQ密码修改的小问题回顾下URL Fragment：http://www.cnblogs.com/chyingp/archive/2013/03/31/url-fragment.html
[2].window.location.hash属性介绍：http://www.cnblogs.com/china-aspx/archive/2008/04/20/1162597.html

+ 查看当前日志评论 (0)

登录

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.781 ms

返回

标题: window.location.hash在Ajax页面中的作用

你没有权限发表评论

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.781 ms

返回

暂无评论

返回

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.820 ms

返回