k01ken’s b10g

He110 W0r1d!

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);
}

参考リンク
ブラウザの履歴を操作する - 開発者ガイド | MDN