0

div に新しい html ファイルをロードするメニューがあります。読み込みは、メニューの<a>タグに添付されたクリック イベントによって行われます。ロードはうまく機能し、ハッシュ タグを使用して新しい href を作成することで、新しいロードを履歴に追加します。

しかし、戻るボタンを使用すると、ブラウザーのアドレス フィールドで URL が正しく更新されますが、ページが読み込まれません。アドレス フィールドにフォーカスして Enter キーを押すと、読み込まれます。

これは、mypage.html ヘッダーにある JavaScript です。

<script type="text/javascript">
  $(document).ready(function() {

    // replace menu link click
    $(".right-menu a").live('click', function(ev) {
      ev.preventDefault();
      ev.stopPropagation();
      window.location.href = $(this).attr('href');
      $("#content-right").load('mypage'+window.location.hash.substring(1)+'.html');
      return false;
    });

    // If page loads, load the content area according to the hash.
    var hrtag = window.location.hash.substring(1);
    if(hrtag=="")
      hrtag='about';
    $("#content-right").load('mypage'+hrtag+'.html');
    window.location.hash = hrtag;
  });
</script>

メニューはこちら

<ul class="right-menu">
  <li><a href="mypage.html#about">About</a></li>
  <li><a href="mypage.html#screens">Screens</a></li>
  <li><a href="mypage.html#license">License</a></li>
  <li><a href="mypage.html#download">Download</a></li>
  <li><a href="mypage.html#donate">Donate</a></li>
</ul>

ページを としてロードするmypage.htmlと、javascript はハッシュを追加し#about、div id"content-right"をロードしますmypageabout.html

メニューをクリックすると、たとえばdownload、div idがロードさ"content-right"れますmypagedownload.html

どちらの場合も、ページのハッシュバージョンにwindow.location設定され、履歴に登録されます。mypage.html#aboutmypage.html#download

次の順序でメニューをクリックすると; license、about、画面を開き、ブラウザの戻るボタンをクリックすると、アドレス フィールドが表示されます。mypage.html#about、mypage.html#licenseしかし、それはページをロードしません!?!

URL は明らかに履歴にありますが、読み込まれません。ここで何が間違っているのか手がかりはありますか?

// ありがとう

編集 - 解決策

Andres Gallo の記事のおかげで、私はこの解決策を思いつきました:

<script type="text/javascript">
  $(document).ready(function() {

    // Make sure the page always load #about
    LoadIDWithURL('#content-right','myPageAbout.html');

    window.addEventListener('hashchange',function() {

      if (window.location.hash != "") {
        // We have a hash, use it!
        LoadIDWithURL('#content-right','MyPage'+window.location.hash.substring(1)+'.html');
      } else {
        // We do not have a hash, force page reload!
        window.history.go(0);
      }

    });

  });

  // Load the targetID with the URL loadURL.
  function LoadIDWithURL(targetID,loadURL) {
    $(targetID).load(loadURL);
  }
</script>
4

3 に答える 3

1

これは、ハッシュのみが異なるページ間を移動する場合の通常の動作です。次の 2 つのオプションがあります。

  1. hashchangeイベントまたはそのエミュレーションを使用して、ユーザーが前後に移動してハッシュを変更したことを検出し、ページを適切に更新します。
  2. HTML5履歴API を使用します。
于 2012-09-02T23:15:56.890 に答える
1

ハッシュチェンジで試すことができます

$(function(){
    $(window).hashchange(function(){
       // some event
    })
})
于 2012-09-02T23:16:15.283 に答える
1

この正確なトピックについて非常に詳細な記事を書きました。あなたがやろうとしていることを正確に構築する方法を説明しています。

さらに、私の記事では、リンクにパラメーターを渡して JavaScript に特別なことをさせる方法についても説明しています。

記事へのリンクは次のとおりですhttp://andresgallo.com/2012/06/08/ajaxifying-the-web-the-easy-way/

最善の方法は、クリック イベントではなく、ハッシュ変更に機能を追加することです。これにより、履歴の変更が JavaScript 機能を利用できるようになります。

于 2012-09-02T23:19:47.273 に答える