Question

我有1个年前完成的codeigniter网站。不，我想实现新的HTML5历史API（pushstate）功能，以便在没有标题刷新的情况下根据网址启用更改内容。有没有简单的方法，以避免网址重组和使用新的HTML5历史API加载整个内容？我试图找到一些方法，但大多数都使用get方法。

$(function() {
        $('nav a').click(function(e) {
    $("#loading").show();
            href = $(this).attr("href");

            loadContent(href);

            // HISTORY.PUSHSTATE
            history.replaceState('', 'New URL: '+href, href);
            e.preventDefault();


        });

        // THIS EVENT MAKES SURE THAT THE BACK/FORWARD BUTTONS WORK AS WELL
        window.onpopstate = function(event) {
            $("#loading").show();
            console.log("pathname: "+location.pathname);
            loadContent(location.pathname);
        };

    });

    function loadContent(url){


        // USES JQUERY TO LOAD THE CONTENT
        $.getJSON("content.php", {cid: url, format: 'json'}, function(json) {
                // THIS LOOP PUTS ALL THE CONTENT INTO THE RIGHT PLACES
                $.each(json, function(key, value){
                    $(key).html(value);
                });
                $("#loading").hide();
            });

        // THESE TWO LINES JUST MAKE SURE THAT THE NAV BAR REFLECTS THE CURRENT URL
        $('li').removeClass('current');
        $('a[href="'+url+'"]').parent().addClass('current');

    }

以下是此演示：http://sandbox.cergis.com/html5-historyAPI/page1.php

Answer 1

我想实现新的HTML5历史API（pushstate）功能，以便在没有标题刷新的情况下根据网址更改内容。

pushState允许您更改网址而无需加载新网页。

有没有简单的方法，以避免网址重组并使用新的HTML5历史记录API加载整个内容？

更改内容是DOM的工作。

您可以使用XMLHttpRequest（或其他Ajax技术）从服务器加载新内容（然后使用DOM操作将其插入页面）

通常，您应该将历史API与DOM操作结合使用。您使用DOM更改页面的内容，然后将URL更改为服务器可用于从头开始生成相同页面的URL。这意味着该页面仍然适用于没有JavaScript的用户（包括搜索引擎），并且在使用不同内容进行替换（几秒钟之后）之前避免了主页加载。

加载内容而不刷新

1 个答案: