0

サイトを完全な html5 ajax Web サイトに変換して、pushstate および popstate で制御された場所にしようとしています。

私の現在のファイル構造は次のとおりです。

common/header.php
common/footer.php
index.php
page1.php
page2.php
page3.php
page4.php
page5.php

わかりました。現在、すべてのファイルには「common」フォルダーに「header.php」および「footer.php」ファイルが含まれています。

ヘッダー ファイルとフッター ファイルの基本的なバージョンは次のようになります。

Header.php (pushState/popState/ajax スクリプトを含む):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<script>
$(function() {
    $('a').on('click', function(e) {
        var href = $(this).attr("href");
        loadContent(href);
        history.pushState({}, '', href);
        e.preventDefault();
    });
    $(window).on('popstate', function() {
        console.log("pathname: "+location.pathname);
        loadContent(location.pathname);
    });
});

function loadContent(url) {
    $('#wrapper').load(url);
}
</script>

<title>REZIINE</title>

</head>
<body>

<div id="wrapper-outer">
<div id="wrapper">

フッター.php:

</div>
</div>

</body>
</html>

ここで、ヘッダーとフッターをすべてのファイルに含めたままにしておくと、新しい HTTP 要求を使用してそれらの URL のいずれかに移動すると、ページは正常に動作しますが、アンカー リンクを使用して移動しようとすると、一部の css スタイルが親を参照します。ページの代わりに div を使用すると、通常は完全に表示されません。

一方、ヘッダー ファイルとフッター ファイルをインデックス ページ以外のページに含めない場合、インデックス ページから開始してナビゲートするときに問題なく読み込まれますが、いずれかを直接指す新しい HTTP 要求を使用しようとすると、すべてのスクリプトと css ファイルを含むヘッダー ファイルが含まれていないため、生のページ コンテンツだけでなく index.php ファイル以外のファイル URL が表示されます。

mysiteurl.com にアクセスするとインデックス ページが正常に読み込まれ、mysiteurl.com/page3 などの新しい http リクエストを使用して別のページに直接移動できるように、このようなサイトをどのように構成する必要があるかを正確に知る必要があります。 .php も正常に読み込まれ、すべてのナビゲーションが正しく機能します。

私のためにこれをレイアウトしてくれた人に前もって感謝します。

4

1 に答える 1

0

フラグメント オプションでjquery-pjaxを使用します。

あなたのスクリプトはheader.php次のようになります

<script>
$(function() {
  $('a').pjax({
    container: "#wrapper",
    fragment: "#wrapper"
  });
});
</script>
于 2012-08-08T06:47:10.433 に答える