調査メニューBTC:-円-ETH:-円-BCH:-円-XRP:-円-Ajax使用時のブラウザーバックボタン(history.pushState)の2つの対策2018年4月14日JS基本のバックボタン対応Ajaxで問題となるのが、ブラウザのバックボタン。Ajaxは履歴が全く保存されません。そのため、ブラウザのバックボタンを使って前後するとどんなに読み込んだ履歴でも最初からやりなおしになってしまいます。すごいページ遷移した後に、一度バックボタンを使ってしまうとすべての履歴がなくなってしまうということが起こってしまいます。これはユーザビリティーMAXで最悪です。ありがたいことに、HTML5以降であれば、使えるhistory.pushStateというものがあります。履歴を独自に保存して使えるようにするためのjavascriptのAPIです。検索するといろんな情報が見つかるのですが、情報をまとめてみました。■対応ブラウザIE10以降でしか利用できないのですが、それ以外であれば、ほぼ全部利用できそうです。全部は調べてませんが。・history.pushStateでデータを保存。・ブラウザのバックボタンが押された。・window.onpopstateで保存したデータを復元。url)・stateはオブジェクトです。復元したいデータを保存させます。html}htmlの値が復元したいデータになります。$(‘#hoge’).html()}というような感じで復元したいデータを保存保存します。・titleは現時点では利用されていないので、nullでOKです。・urlは現在のページのURL。相対URLも指定できます。これで、現在のページの内容(ajaxで読み込んだタグのid等)とその内容を表示するURLがpushStateで保存されます。※オブジェクトのキーとなるpageは、history.pushStateをコールするたびにユニークにする必要はありません。同じでもpushなのでデータはまるごと保存されて、保存された順にpopされます。※キーと同様にurlもユニークである必要はありません(※1)。※1:urlはユニークにしなくても動きます。SEO的にはURLを変更したほうがよいので変更しましょう。このサンプルではurl変更はしてません。※例:トップページでajaxで.doneの場合に#hogeに受け取ったresを読み込みます。$(‘#hoge’).append(res);受け取ったら、その状態をヒストリーとして保存します。//ajaxで読み込んだ$('#hoge').html()の内容をトップページのurlで保存。})ここで、またユーザーがもっと読むなどのアクションをとったとします。//history.pushStateで変更されたajaxのhtml内容をそのまま新しい履歴としてまるごと保存します。"");})ここから戻るためにブラウザのバックボタンを押します。バックボタンを押したときの処理はpopstateで受け取ります。//バックボタンた押されるたびに、pushしたpageオブジェクトのデータがまるごとpopされます。}}というようにして保存したデータをpopして表示します。これでうまく表示できるようになるのは、あくまでajaxのページ遷移なしの状態の場合のみです。ajaxで読み込みこんだページのリンクなどで、別のページに移動してしまうと(通常のページ遷移)、history.pushStateでpushしていてもバックボタンで戻ると、ajaxで読み込んだ内容はなくなってしまいます。この場合は、フォームのtextareaなどを使って事前にajaxで読み込んだデータを保存しておき、それを読み込ませるようにするのが一番手軽にできる方法です。//ajaxで読み込んだ$('#hoge').html()の内容をトップページのurlで保存。//pushした内容と同じものをまるっとtextareaに保存。$('#hoge').html($("textarea#savedata").val());}というようにtextareaを確認して、保存したデータがあればその内容を該当エリアに戻すという方法で対応します。シングルページだけでなくページ遷移を伴うような場合はこれらの対策が必要です。ちなみに、Chromeとfirefoxではほぼほぼ狙い通りの動きをしてくれますが、IEはhistoryは大丈夫そうなのですが、フォームデータでの復活処理がうまく動かないです。※metaタグでexpireすればいいという記事をみて対策してみたのですがうまく動いてくれませんでした。なると...cookieにデータ保存して、うんぬんとか...。pushStateで戻した内容やフォームから読み込んだデータは、delegateかlive(※liveは非推奨なので$(document).on~の書き方)であればちゃんとイベント発火します。datepickerの動作がおかしくなります。pop後に再度イニシャライズしても表示されなかったり、consoleにエラーが表示されます。datepickerは現在調査中。pushStateは手軽に簡単にできますが、クロスブラウザやイベント関連が複雑になるので大変です。APIでローソク足グラフ作成2018年3月13日Chromeでjavascriptをconsole.logを使ってデバッグする方法。2018年3月27日jQueryのfindを使う場合。WPのnonce認証。いわゆるCSRF対策です。reserved.メニューを閉じる。