节点 | urlObject.hash API(1)

📌 相关文章

📜 节点 | urlObject.hash API(1)

📅 最后修改于: 2023-12-03 15:41:25.534000 🧑 作者: Mango

在Web开发中，常常需要对URL进行解析并操作。其中，urlObject.hash是一个很重要的API，用于获取URL中#后面的片段，常用于前端实现单页应用。

urlObject.hash是一个属性，可以被直接访问。

console.log(window.location.hash); // #section1

我们可以通过设置urlObject.hash来改变当前网页的锚点。

window.location.hash = 'section2';

当网页的锚点发生变化时，我们可以通过window.addEventListener('hashchange', callback)来监听。

window.addEventListener('hashchange', function() {
  console.log('hash changed!');
  console.log(window.location.hash);
});

此时，当urlObject.hash发生变化时，会自动触发事件回调函数，输出hash值。

urlObject.hash常常被用于前端实现单页应用，通过监听hash变化，动态加载不同的内容，从而实现页面路由。