0

我有一年前完成的 codeigniter 网站。不，我想实现新的 HTML5 历史 API (pushstate) 功能以启用基于 url 的更改内容而无需刷新标题。有什么简单的方法可以避免使用新的 HTML5 历史 API 重构 url 和加载整个内容？我试图找到一些方法，但他们中的大多数都在使用 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

4

1 回答 1

2

我想实现新的 HTML5 历史 API (pushstate) 功能以启用基于 url 的更改内容而无需刷新标题。

pushState是否允许您在不加载新页面的情况下更改 url 。

有什么简单的方法可以避免使用新的 HTML5 历史 API 重构 url 和加载整个内容？

改变内容是 DOM 的工作。

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

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

于 2013-06-19T16:39:14.210 回答