如何将函数绑定到 URL 查询字符串的更改，而不是 hashchange

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')