URLクエリ文字列の変更に関数をバインドする方法（ハッシュチェンジではなく）

Question

タイトルからわかるように、URLクエリ文字列の変更に関数をバインドする方法を検討しています。

例：

から：/baby

へ：からが変身するとき/baby/?_bc_fsnf=1&brand[]=37

詳述すると、私は、関数が実行したいと思います~。

乾杯！

Answer 1

ページが更新されない場合は、誰かがおそらくhistory.pushStateまたはhistory.replaceStateを呼び出してURLを変更している可能性があります。

あり pushStateと replaceStateが呼ばれたときに追跡する方法で、内蔵されていますが、この trackユーティリティを使用して各機能をラップすることによって、それらを自分で追跡することができ

：

function track (fn, handler, before) { 
 
    return function interceptor() { 
 
    if (before) { 
 
     handler.apply(this, arguments) 
 
     return fn.apply(this, arguments) 
 
    } else { 
 
     var result = fn.apply(this, arguments) 
 
     handler.apply(this, arguments) 
 
     return result 
 
    } 
 
    } 
 
} 
 

 
var oldQs = location.search 
 

 
function handler() { 
 
    console.log('Query-string changed:', 
 
    oldQs || '(empty)', '=>', 
 
    location.search || '(empty)' 
 
) 
 

 
    oldQs = location.search 
 
} 
 

 

 
// Assign listeners 
 
history.pushState = track(history.pushState, handler) 
 
history.replaceState = track(history.replaceState, handler) 
 
window.addEventListener('popstate', handler) 
 

 

 
// Example code to change the URL 
 
history.pushState(null, 'Title 1', '/baby/?key=value') 
 
history.replaceState(null, 'Title 2', '/baby/?_bc_fsnf=1&brand[]=37')