編集 3 : このjsFiddleはプラグインで動作します。ほとんど持っています。
編集 2 :フィドルを作成しました。プラグインをそこで動作させることはできませんが、分析しやすいかもしれません。
私が構築している Web ページでは、記事 (投稿) と新しいページが Ajax 経由で読み込まれます。新しい Ajax コンテンツが読み込まれると同時に、アドレス バーが変更されます ( jQuery Address pluginを使用)。
したがって、通常のナビゲーションは次のようになります。
/ /ページ2 /ページ3 /記事7 /ページ3 /ページ4
このナビゲーションでは、ブラウザー ボタンが押されていないことに注意してください。article7を終了すると、Web サイトは以前の URL (この場合はpage3 ) に戻ります。
プラグインは、ユーザーがいつ戻るボタンまたは進むボタンを押したかを検出しません。ユーザーがいつ戻るボタンまたは進むボタンを押したかを知る方法を見つけました。
新しいコンテンツが追加され、アドレスが変更されるたびに、新しいアドレスを配列に格納します。ユーザーが「戻る」または「進む」ボタンを押した場合、次のように分析します。
if (new_url == penultimate_value_in_array) => 戻るボタンが押された (配列から最後の値を消去する)
else => 進むボタンが押された (配列に新しい値を追加する)
これは、この種のナビゲーションでは正しく機能します。
/ /ページ2 /ページ3 /ページ4
私の場合、戻るボタンに最適です。ただし、ユーザーが /article7 から /page3 への [進む] を押すと、関数はそれを [戻る] として読み取ります。私が何を意味するかを理解するための例を次に示します。
ユーザーは /page4 にいて、[戻る] を押します -> new_page=/page3 これは penultimate_page_in_array(/page3) と同じです => 戻る
/ /ページ2 /ページ3 /記事7 /ページ3 /ページ4
ユーザーは /page3 にいて、戻るを押します -> new_page=/article7 これは penultimate_page_in_array(/article7) => BACK と同じです
/ /ページ2 /ページ3 /記事7 /ページ3
ユーザーは /article7 にいて、[戻る] を押します -> new_page=/page3 これは penultimate_page_in_array(/page3) と同じです => 戻る
/ /ページ2 /ページ3 /記事7
ユーザーは /page3 にいて、[戻る] を押します -> new_page=/page2 は penultimate_page_in_array(/page2) => BACK と同じです
/ /ページ2 /ページ3
ユーザーが /page2 にいて、進む -> new_page=/page3 が penultimate_page_in_array(/) と等しくない => 進む
/ /ページ2
ユーザーは /page3 にいて、[進む] を押します -> new_page=/article7 これは penultimate_page_in_array(/page2) と等しくありません => 進む
/ /ページ2 /ページ3
ユーザーは /article7 にいて、Forward を押します -> new_page=/page3 that IS equal to penultimate_page_in_array(/page3) => BACK (ここでは、値は FORWARD にする必要があります)
/ /ページ2 /ページ3 /記事7
False Back が Forward であることを決定する別のステートメントをどのように導入できますか?
編集：
これは私が使用しているコードです。問題の解決に役立つかどうかはわかりませんが、次のとおりです。
var site_url = 'www.mysite.com',
last_visited_url = '',
just_visited_url = $.address.baseURL().replace(site_url,''),
visited_pages_array = [just_visited_url],
page_number = '';
新しいページにアクセスするとき: ajax 呼び出し、その後:
last_visited_url = just_visited_url;
page_number = $('a.next_page_link').attr('href').replace(site_url,''); // /page3 for example
$.address.state(site_url).value(page_number);
just_visited_url = page_number;
visited_pages_array.push(just_visited_url);
記事をロードするとき: ajax 呼び出し、その後:
article_url = $('a.article_title').attr('href').replace(site_url,''); // /article7 for example
last_visited_url = just_visited_url;
$.address.state(site_url).value(article_url);
just_visited_url = article_url;
visited_pages_array.push(just_visited_url);
記事が存在する場合:
last_visited_url = just_visited_url;
$.address.state(site_url).value(page_number); // This page number is the last page_number value
just_visited_url = page_number;
visited_pages_array.push(just_visited_url);
このコードは、ユーザーがブラウザのボタンのいくつかを押すと実行されます。
$.address.externalChange(function() {
var newPage = $.address.baseURL().replace(site_url,'');
if (visited_pages_array[visited_pages_array.length-2] == newPage) {
visited_pages_array.splice(visited_pages_array.length-1 , 1);
console.log('BACK pressed');
} else if (visited_pages_array.length > 1) {
visited_pages_array.push(newPage);
console.log('FORWARD pressed');
} else {
console.log('REFRESH pressed');
}
});