1

AJAX を使用してコンテンツを動的に div にロードするサイトがあります。

そのためのリンクは、href="#" を含むアンカーと、AJAX をトリガーする onclick イベントです。

これにより、クリックして戻ったときに履歴が残らないため、あるページをロードしてから別のページをロードしてクリックしても何も起こりません。

コードの基本的なバージョンは次のとおりです。

<script type="text/javascript">
function loadXMLDoc(url)
{
<!-- Load XML Script here. -->
}
</script>

</head>

<body>

<div id="myDiv">

<!-- Target div. -->

</div>

<a href="#1" onclick="loadXMLDoc('1.txt')">Click Me.</a>

<a href="#2" onclick="loadXMLDoc('2.txt')">Click Me.</a>

<a href="#3" onclick="loadXMLDoc('3.txt')">Click Me.</a>

</body>

私が知りたいのは、各リンクに異なる「#」を付けてから、popstate ハンドラーを使用して適切なイベントを呼び出すことができるかということです。したがって、リンク 1、2、3 の順にクリックしてから戻るボタンを押し始めると、 2 に戻り、次に 1 に戻ります。

history.js を使用し、loadXML スクリプトで pushstate の使用を開始する予定でしたが、履歴の操作全体が少し汚れていて信頼性が低いと思います。

私は正しい線で考えていますか、それとももっと良い方法がありますか?

現在、私のリンクはすべて「#」を使用しているため、さらにコンテンツをロードするとページの上部に戻りますが、可能であれば戻ることができるようにしたいと考えています.

どんな助けでも素晴らしいでしょう。

4

2 に答える 2

0

ブラウザはハッシュタグを履歴に適切に保存します。この質問ページにハッシュタグ #1 を追加し、Enter キーを押して #2 に変更し、Enter キーを押して #3 に変更し、Enter キーを押してください。[戻る] ボタンをクリックすると、#3 から #2 へのハッシュの変更が表示されます。リンクのクリック時にハッシュ自体のみを変更し、ページ ハッシュの変更とページの読み込みイベントに反応することをお勧めします。

function react() {
    var hash = window.location.hash.replace("#", "");
    loadXMLDoc(hash + ".txt");
};

document.body.onload = function() {
    react();
    window.onhashchange = react;    
};

<a href="#1">Click me</a>
<a href="#2">Click me</a>
<a href="#3">Click me</a>

onhashchangeイベントは古い IE ではサポートされていないことに注意してください。必要に応じてこれに対処する唯一の方法は、タイマーを setInterval で定義し、ハッシュの等価性をチェックすることです。

于 2013-04-22T11:40:28.050 に答える
0

LocalStorage と HistoryAPI を組み合わせて使用​​してみてください。XMLDoc を読み込むときは LocatStorage に保存し、[戻る] を押すと、Web からではなくストレージからデータを読み込みます。上記のビットコード。

 /* Handling history.back added */
    window.onpopstate = function(event) {
      yourHandleBackFunction(event.state);
    };

function yourHandleBackFunction(renderTs) {
      /*Check TS and load from localStorage if needed*/
  };
于 2013-04-22T11:41:17.447 に答える