使用 .load 的 AJAX 热链接/返回/刷新功能

Question

下面是我的 AJAX 代码将 DIV 从外部 HTML 文件加载到目标 DIV 到另一个 HTML 页面上，任何人都可以建议如何使加载内容的页面具有返回/刷新/热链接功能，保持 DIV 加载在页？

$(document).ready(function(){
    $(document).on('click', '#about2', function() {
        $("#content").load("content.html #about", function() {
        $.getScript("slides.js", function() {
        $(window).scrollTop(0);
        });
        });
    });

    $(document).on('click', '#process2', function() {
        $("#content").load("content.html #process", function() {
        $(window).scrollTop(0);
        });
    });

    $(document).on('click', '#materials2', function() {
        $("#content").load("content.html #materials", function() {
        $(window).scrollTop(0);
        });
    });   

    $(document).on('click', '#radio2', function() {
        $("#content2").load("content.html #radiofriendly", function() {
        $(window).scrollTop(0);
        });
    });
    });

基本上，我想：

http://crookedcartoon.co.uk/print.html#process

直接链接到加载了#process DIV 的页面，允许刷新、后退、前进浏览器功能。有什么建议么？目前它只是链接到 http://crookedcartoon.co.uk/print.html 并加载了原始 DIV。

在此先感谢，JQuery 确实有问题。

编辑**

$(document).ready(function(){
$(document).on('click', '#about2',function ParseURL() {
    switch(location.hash.split("&")[0]) {
        case '#about':
            $("#content").load("content.html #about", function() {
                $(window).scrollTop(0);
            });
            break;

$(document).on('click', '#process2',function ParseURL() {
    switch(location.hash.split("&")[0]) {
        case '#process':
            $("#content").load("content.html #process", function() {
                $(window).scrollTop(0);
            });
            break;

$(document).on('click', '#materials2',function ParseURL() {
    switch(location.hash.split("&")[0]) {
        case '#process':
            $("#content").load("content.html #materials", function() {
                $(window).scrollTop(0);
            });
            break;

$(document).on('click', '#pricing2',function ParseURL() {
    switch(location.hash.split("&")[0]) {
        case '#process':
            $("#content").load("content.html #pricing", function() {
                $(window).scrollTop(0);
            });
            break;

         default:
    }
}

$(window).bind("pageshow", function(event) {
    if (event.originalEvent.persisted) {
        ParseURL();
    }
});

$(document).ready(function ($) {
    ParseURL();
}); 

Answer 1

使用 hashchange 事件检测 URL 修改。这将允许您在加载后更新 DIV。当你使用 back 和 forward 时，会有一个事件。使用它来查看哈希，并适当地加载内容 DIV。

这是一个很棒的 jQuery 插件，它通过示例支持您想要的功能：Ben Alman Hashchange plugin

就目前而言，当您从左栏中选择一个链接时，您的页面会正确更新，但在使用历史记录时不会更新。

将这些添加到与 print.html 关联的 javascript 中，而不是在 content.html 中！！！我相信你称它为 core.js？

//You will need one entry in this switch statement for *each* hash value: #process, #materials, #pricing, etc
function ParseURL() {
    switch(location.hash.split("&")[0]) {
        case '#materials':
            $("#content").load("content.html #materials", function() {
                $(window).scrollTop(0);
            });
            break;
        case '#process':
            $("#content").load("content.html #process", function() {
                $(window).scrollTop(0);
            });
            break;
         default:
    }
}

//This should update on history button use
$(window).bind("pageshow", function(event) {
    if (event.originalEvent.persisted) {
        ParseURL();
    }
});

//Using ParseURL inside your ready function will allow linking directly to a sub page
//This allows those going to the URL:
// http://crookedcartoon.co.uk/print.html#pricing directly will should display the 
// pricing information in the content DIV.
$(document).ready(function ($) {
    ParseURL();
});