0

次の問題があります: 純粋な AJAX ページ ナビゲーションに基づいて HTML5 ページを作成しようとしています。だから私は「index.html」と呼ばれるメインページを持っています。これには、CSS、スクリプト、およびメニューが含まれています。メニューは次のようになります。

<ul>
    <li><a id="startLink" class="navlink" href="pages/start.html">Start</a></li>
    <li><a class="navlink" href="pages/test.html">Test</a></li>
</ul>

このアンカーの 1 つをクリックして、「index.html」の div への AJAX 呼び出しを使用して、「href」の下にページをロードする JavaScript を呼び出します。そのため、メイン ページがリロードされることはなく、すべての新しいコンテンツがコンテナーに表示されるだけです。関数は次のようになります。

$(document).ready(function()
{
var popped = ("state" in window.history && window.history.state !== null), initialURL = location.href;

$(".navlink").click(function(e)
{
    var link    = $(this);
    var href    = link.attr("href");

    loadContent(href);
    window.history.pushState(null, null, href);

    e.preventDefault();
});

$(window).bind("popstate", function(e)
{
    // Ignore inital popstate that some browsers fire on page load
    var initialPop = !popped && location.href == initialURL;
    popped = true;
    if (initialPop) return;

    loadContent(location.pathname);
});

init();
});

function init()
{
    $("#startLink").click();
};

function loadContent(url)
{
    $("main").load(url);
};

history.pushState 関数と popstate 関数を使用して、ブラウザーの履歴を処理し、ブラウザーに URL を表示しています。これは問題なく機能しますが、今私の問題に直面しています。

index.html をロードすると、init() 関数が開始アンカーをクリックして、ページに初期コンテンツを表示します。さて、test.html に移動したい場合、ブラウザは「Host/Somepath/pages/pages/test.html」のようなパスを表示します。開始と同じ: .../pages/pages/start.html。理由は、ブラウザーが私のフォルダー ページに入ったと認識し、start.html を表示するため、アンカーに私の href があるためだと思います。そこから、ページ/ページ/に移動して、メニューの他のページに移動したいと考えています。私のプロジェクト構造は次のようになります。

  • index.html
  • CSS
  • 画像
  • スクリプト
  • ページ
    • start.html
    • test.html

この問題に対処する方法を知っている人はいますか? すべての html を 1 つのフォルダーに配置したくないので、プロジェクトを少し構成するためにサブフォルダーが必要です。

4

1 に答える 1

0

HTML5 のlocalStorageまたはsessionStorageを試してください

サンプルコード

window.sessionStorage.setItem('isFirst', true);
$(document).ready(function () {

  if(window.sessionStorage.getItem('isFirst')){
    window.sessionStorage.setItem('isFirst', false);
    //Put your code here. It will work only once
    init();
  }    
});

HTML ローカル & セッション ストアクリックの詳細を読むことができます

于 2013-11-13T12:11:13.920 に答える