JavaScriptで詰まったところ
■document.querySelectorAllで指定のCSSセレクタが存在するかチェックする
if(document.querySelectorAll('.element').length !== 0){ console.log('.element exists.'); }
■ページ遷移せずにURLを書き換えるには?
・ページ遷移せずにURLを書き換えるにはhistory.pushState(state, title,url);を使います。
・以下のコードは、test.comであれば、ページ遷移をせずに、test.com/hogeに書き換えることになります。ただし、(ローカル環境か、ネット上にアップするかどちらかの)サーバーを立ち上げた環境でやらないとうまくいきません。
if( window.history && window.history.pushState ){ window.history.pushState(null,'hoge','/hoge'); }
・URLが変更されて、戻るボタンを押すと、URLは変更されるけど、ページ自体は何も変わりません。ここで、現在のURLに応じて変化させたい場合は、popstateというイベントを使います。
$(window).on('popstate', function(e){ // ここで進む/戻るボタンを押すたびに変化させたい処理を書きます。 //現在のURLを表示させます。 alert(location.href); });
参考リンク
【HTML5】HISTORY API「pushState/popState」を使って画面遷移しなくてもURLを変化させて、戻るボタンの挙動をカスタマイズする | unitopi - ユニトピ -
JavaScriptでURLを操作するメモ - Qiita
16行 で pushState popState - Qiita
location.pathname-JavaScriptリファレンス
■ページ遷移せずに書き換える前のURLに戻るには?
・HTML5から、historyオブジェクトの履歴スタックにアクセスして、操作をできるようになったみたいです。
if(window.history && window.history.go){ history.go(-1); }