监控URL Fragment变化的JavaScript代码是很常见的一种需求，可以轻松地在单页应用程序（SPA）中实现页面的切换和跳转。以下是实现该需求的攻略：
我们可以通过绑定Window对象的hashchange事件来捕捉URL Fragment变化事件。这个事件会在Fragment的值发生变化时被触发，我们可以在事件回调函数中显示当前Fragment的值。
window.addEventListener("hashchange", function() {
console.log("The current URL fragment is: " + window.location.hash);
});
在事件回调函数中，我们可以通过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);
});
我们可以通过JavaScript代码来改变当前页面的Fragment的值。这个过程中，我们需要注意避免页面跳转，因为改变Fragment的值并不是一次新的浏览器导航。
var newFragment = "new-fragment-value";
window.location.hash = newFragment;
我们可以根据当前的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代码的完整攻略。
本文链接：http://task.lmcjl.com/news/10855.html