2

HTML5 プッシュ状態 (ハッシュ タグにフォールバック) を使用してクライアント側のナビゲーションを処理する単一ページの Web アプリケーションを作成しています。

私が気づいたことの 1 つは、ユーザーがページを下にスクロールしてから別のページへのリンクをクリックすると、そのページに移動したときにブラウザーがスクロールした位置にとどまるということです。

新しいページに移動すると、一番上までスムーズにスクロールできるようにしたかったのです (リンクをたどるときのすべての Web サイトと同じ動作)。

ナビゲーション コントローラーの小さな jquery アニメーションでこれを実現しました。現在の問題は、ブラウザーの [戻る] ボタンをクリックすると、以前のスクロール位置に戻らず、前のページに移動することですが、一番上までスクロールします。

最後/現在のクライアント側のナビゲーションがブラウザの戻るボタンまたは進むボタンによって引き起こされたかどうかを検出することは可能ですか? もしそうなら、これを使ってスクロールを防ぎます。

乾杯

4

2 に答える 2

0

ユーザーが特別なajax認識ハッシュタグを入力したり、ブックマークしたり、対応するページのリンクをクリックしたりしても、現在作業中のサイトが同じように応答するようにしたい。したがって、ハッシュタグ自体のパターンを確認し、必要に応じてナビゲーションを強制します。

例えば：

var myDefaultPageName = "myAjaxPage1";

// hash tags in this domain may indicate ajax page navigation
// using '#!' to indicate ajax links however, allowing user to type in 
// hashtag without '!' so function understands both '#!myAjaxPage1' and
// '#myAjaxPage1' as ajax requests, the pattern of the hashtag will be
// checked to determine if ajax navigation is needed

function processHashtagChange() {
    // note: bookmarked urls may be #! or #, need to understand both
    var startIndex = 1; // skip '#'
    if (location.hash.charAt(1) == '!') { // check for special '#!' ajax prefix
        startIndex++;
    }

    // extract ajax pagename from hash
    var pagename = location.hash.substring(startIndex); 

    var regex = "."; // match everything for now, hash tags 
                     // only used for ajax navigation here

    if (pagename.length == 0) // default to something if needed, allows 
    {                         // back button to http://mydomain.com to load 
                              // default ajax page
        pagename = myDefaultPageName;
    }

    if (pagename.match(regex)) { // does this hash indicate ajax navigation
        var pageurl = '/?page=' + pagename;    
        loadPageViaAjax(pageurl); // update the dom via ajax
    }
}
于 2011-12-14T01:16:40.787 に答える
0

私の知る限り、「アプリケーションがハッシュタグを変更した」と「ブラウザがハッシュタグを強制的に変更した」の違いしかわかりません。

これは私がそれをチェックする方法です：

コントローラーが新しいハッシュタグを使用して新しい状態をプッシュする (ページを開く) 場合、この新しいハッシュタグを window.location.hash に設定する直前にグローバル JavaScript 変数に格納します。「hashchange」イベントをキャッチしたら、このグローバル変数を window.location.hash と比較します。グローバル変数が新しいハッシュ タグと同じ場合は、アプリケーションがハッシュ自体を変更した (そして新しいページを開いた) ことを意味します。グローバル変数が設定されていない場合は、ブラウザがナビゲーションを強制したことを意味します。ただし、ブラウザがアドレスバーの編集のため、または戻る/進むボタンのためにナビゲーションを強制したかどうかはわかりません。

次のコードを検討してください。

// Global hashtag variable, used to compare state changes
var gCurrentHash = window.location.hash;

// Called when hashtag is changed by the browser
function onHashChange(event)
{
    var hash_tag = window.location.hash;

    if (hash_tag != gCurrentHash)
    {
        // Browser forced navigation
    }
    else
    {
        // App caused navigation
    }
}

window.addEventListener('hashchange', onHashChange, false);

コントローラで、ハッシュ タグを更新する直前に、次のコードを呼び出します。

gCurrentHash = window.location.hash;

window.location.hashtag を実際に変更する前に、これを呼び出すことが非常に重要です。

[編集] この代替案を試すことができます: ハッシュタグの変更履歴を Cookie に保存し、変更を比較します。その情報から、前後のナビゲーション イベントを推定できます。

于 2011-11-30T13:08:47.830 に答える