标题: 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">
        $(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)

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

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.064 ms

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

你没有权限发表评论

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

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.064 ms

暂无评论

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

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.080 ms