0

私は1年前に行われたcodeigniter Webサイトを持っています。いいえ、新しい HTML5 history API (pushstate) 関数を実装して、ヘッダーを更新せずに URL に基づいてコンテンツを変更できるようにしたいと考えています。URL の再構築を回避し、新しい 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

4

1 に答える 1

2

新しい HTML5 history API (pushstate) 関数を実装して、ヘッダーを更新せずに URL に基づいてコンテンツを変更できるようにしたいと考えています。

pushState新しいページをロードせずに URLを変更できるようにするためのものです。

URL の再構築を回避し、新しい HTML5 履歴 API を使用してコンテンツ全体を読み込む簡単な方法はありますか?

コンテンツの変更は DOM の仕事です。

XMLHttpRequest (またはその他の Ajax 手法) を使用して、サーバーから新しいコンテンツを読み込むことができます (そして、DOM 操作を使用してページに挿入します)。

通常、history API は DOM 操作と組み合わせて使用​​する必要があります。DOM を使用してページのコンテンツを変更してから、URL を、サーバーが同じページを最初から生成するために使用できる URL に変更します。これは、ページが JavaScript を使用しないユーザー (検索エンジンを含む) に対して引き続き機能し、(数秒後に) 別のコンテンツに置き換えられる前にホームページの読み込みを回避することを意味します。

于 2013-06-19T16:39:14.210 に答える