监控 url fragment变化的js代码

监控URL Fragment变化的JavaScript代码是很常见的一种需求，可以轻松地在单页应用程序（SPA）中实现页面的切换和跳转。以下是实现该需求的攻略：

步骤一：绑定Window对象的hashchange事件

我们可以通过绑定Window对象的hashchange事件来捕捉URL Fragment变化事件。这个事件会在Fragment的值发生变化时被触发，我们可以在事件回调函数中显示当前Fragment的值。

window.addEventListener("hashchange", function() {
  console.log("The current URL fragment is: " + window.location.hash);
});

步骤二：获取Fragment的值

在事件回调函数中，我们可以通过window.location.hash属性来获取当前Fragment的值。这个属性返回的值包括#号，并且是字符串类型。如果需要去掉#号，可以通过字符串截取函数substring()或者slice()来实现:

window.addEventListener("hashchange", function() {
  var fragment = window.location.hash.substring(1);
  console.log("The current URL fragment is: " + fragment);
});

或

window.addEventListener("hashchange", function() {
  var fragment = window.location.hash.slice(1);
  console.log("The current URL fragment is: " + fragment);
});

示例一：改变Fragment的值

我们可以通过JavaScript代码来改变当前页面的Fragment的值。这个过程中，我们需要注意避免页面跳转，因为改变Fragment的值并不是一次新的浏览器导航。

var newFragment = "new-fragment-value";
window.location.hash = newFragment;

示例二：根据Fragment的值执行不同的操作

我们可以根据当前的Fragment值，执行不同的操作。例如，我们可以在地址栏中输入http://example.com/#about时显示关于页面，输入http://example.com/#contact时显示联系页面。

window.addEventListener("hashchange", function() {
  var route = window.location.hash.substring(1);
  switch (route) {
    case "about":
      console.log("About page is shown.");
      break;
    case "contact":
      console.log("Contact page is shown.");
      break;
    default:
      console.log("Home page is shown.");
      break;
  }
});

以上就是监控URL Fragment变化的JavaScript代码的完整攻略。