上一篇: 
下一篇: 
文章来自: 
引用通告: 
Tags: 
最新日志:
不错呦！smile@林凯西，确保“准备文件”中的几个文件都有安装，S...您好，看了您这篇帖子觉得很有帮助。但是有个问题想请...我的修改过了怎么还被恶意注册呢 @jjjjiiii 用PJ快9年了，主要是A...PJ3啊，貌似很少有人用PJ了，现在不是WP就是z...@332347365，我当时接入时错误码没有-10...楼主，ChkValue值应为-103是什么意思呢？...大哥 你最近能看到我发的信息，请跟我联系，我有个制...
window.location.hash在Ajax页面中的作用
编辑:dnawo 日期:2013-04-16
众所周知，Ajax页面的特点是用一个页面来处理所有的事务，页面无需刷新，虽然这样提高了用户体验，但却存在以下不足：
引用内容
使用window.location.hash(锚点)能很好的解决上边两个问题，下边是一个简单的示例：
参考资料
[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
引用内容·用户不能添加收藏喜欢的页面；
·导致浏览器前进、后退按钮失效；
·导致浏览器前进、后退按钮失效；
使用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">
$(document).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.链接点击事件
$(document).delegate("#link1", "click", initPage1);
$(document).delegate("#link2", "click", initPage2);
$(document).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>
<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">
$(document).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.链接点击事件
$(document).delegate("#link1", "click", initPage1);
$(document).delegate("#link2", "click", initPage2);
$(document).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 | 引用: 0 | 查看次数: 3752
发表评论
请登录后再发表评论！
