JS傍受リターン、後退、前ページボタンのイベント方法
1159 ワード
一、window.history対象
history.back() ブラウザで後退ボタンをクリックするのと同じです.
histroy.forward() ブラウザで前ボタンをクリックするのと同じです.
history.go() メソッドにパラメータを記入することができます(ジャンプページの個数を示します)
安全のためにjavascriptはhistoryに既存のurlリンクを修正することは許されませんが、pusState方法を使ってhistroyにurlリンクを追加し、popstateイベントモニタリングhistoryスタックにurlをポップアップします.
pusshStateメソッドは、指定されたアドレスに関連するステータスオブジェクト、poststateイベントがトリガされた場合、このオブジェクトはコールバック関数に入ります.この対象が必要でない場合はここでnullを記入できます.title:新しいページのタイトルですが、すべてのブラウザは現在この値を無視していますので、ここでnullを記入できます.url:新しいURLは現在のページと同じドメインにある必要があります.ブラウザのアドレスバーにこのURLが表示されます.pusshState()は歴史を作ることができ、popstateイベントに合わせて、history.go(-1)を使って前のページに戻ることができます.replace Stateは歴史記録には入れません.history.go(-1)で現在のページをスキップします.history.go(-2)に相当します.
二、傍受リターン、後退、前ページボタンでイベントを傍受する
history.back() ブラウザで後退ボタンをクリックするのと同じです.
histroy.forward() ブラウザで前ボタンをクリックするのと同じです.
history.go() メソッドにパラメータを記入することができます(ジャンプページの個数を示します)
安全のためにjavascriptはhistoryに既存のurlリンクを修正することは許されませんが、pusState方法を使ってhistroyにurlリンクを追加し、popstateイベントモニタリングhistoryスタックにurlをポップアップします.
pusshStateメソッドは、指定されたアドレスに関連するステータスオブジェクト、poststateイベントがトリガされた場合、このオブジェクトはコールバック関数に入ります.この対象が必要でない場合はここでnullを記入できます.title:新しいページのタイトルですが、すべてのブラウザは現在この値を無視していますので、ここでnullを記入できます.url:新しいURLは現在のページと同じドメインにある必要があります.ブラウザのアドレスバーにこのURLが表示されます.pusshState()は歴史を作ることができ、popstateイベントに合わせて、history.go(-1)を使って前のページに戻ることができます.replace Stateは歴史記録には入れません.history.go(-1)で現在のページをスキップします.history.go(-2)に相当します.
二、傍受リターン、後退、前ページボタンでイベントを傍受する
window.addEventListener("popstate",function(e){
alert(" ");
},false)
後退イベントを傍受しましたが、続けて押すと前のページに戻ることができますので、このページのurlを追加してpusshateを使う必要があります.function pushHistory(){
var state={
title:"title",
url:"#"
};
window.history.pushState(state,"title","#");
}