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。当你使用前后时，会有一个事件。用它来查看哈希值，并适当加载内容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();
});

使用.load的AJAX Hotlinking / back / refresh功能

1 个答案: