hash模式
使用window.location.hash属性以及onhashchange事件,实现监听浏览器地址的hash值变化,执行相应的js切换网页
属性 | 含义 | 例子 |
---|---|---|
location.href | 完整的URL字符串 | https://www.example.com:8080/pathname/?search=test#hash |
location.protocol | 协议部分 | https: |
location.hostname | 主机名 | www.example.com |
location.port | 端口号 | 8080 |
location.host | 主机名和端口号 | www.example.com:8080 |
location.pathname | 路径部分 | /post/6993840419041706014 |
location.search | 查询字符串部分 | ?search=test |
location.hash | 哈希值 | #hash |
window.location还提供了一些方法:
方法 | 含义 |
---|---|
location.assign(url) | 加载指定的URL |
location.replace(url) | 替换当前的 URL,但不会在历史记录中创建新的条目。即用户无法通过浏览器的“后退”按钮返回到之前的页面。 |
location.reload(forceReload) | 重新加载当前页面。forceReload 参数为 true 时会强制从服务器重新加载页面(而不是从缓存中加载)。 |
location.toString() | 返回当前 URL 的字符串表示。 |
// 获取当前 URL 的各种部分
console.log(window.location.href); // 输出完整的 URL
console.log(window.location.protocol); // 输出协议部分
console.log(window.location.host); // 输出主机和端口号
console.log(window.location.hostname); // 输出主机名
console.log(window.location.port); // 输出端口号
console.log(window.location.pathname); // 输出路径
console.log(window.location.search); // 输出查询字符串
console.log(window.location.hash); // 输出哈希
console.log(window.location.origin); // 输出源 URL
// 改变 URL 并重新加载页面
window.location.href = 'https://www.example.com';
// 替换当前 URL,不会在历史记录中创建新的条目
window.location.replace('https://www.example.com');
// 重新加载页面
window.location.reload(); // 从缓存中重新加载
window.location.reload(true); // 强制从服务器重新加载
history模式
History API是H5提供的新特性,允许开发者直接更改前端路由,即更新浏览器URL地址而不重新发起请求。它表示当前窗口的浏览历史。当发生改变时,只会改变页面的路径,不会刷新页面。 History 对象保存了当前窗口访问过的所有页面网址。通过 history.length 可以得出当前窗口一共访问过几个网址。 由于安全原因,浏览器不允许脚本读取这些地址,但是允许在地址之间导航。 浏览器工具栏的“前进”和“后退”按钮,其实就是对 History 对象进行操作。
属性 | 含义 |
---|---|
history.length | 历史记录中的条目数 |
history.state | 历史记录条目的状态对象 |
window.history 还提供了一些方法:
方法 | 含义 | 例子 |
---|---|---|
history.pushState(state, title, url) | 将一个状态对象添加到历史记录栈中 | window.history.pushState({ page: 1 }, “title 1”, “/page1”); |
history.replaceState(state, title, url) | 修改当前历史记录条目的状态对象、标题和 URL | window.history.replaceState({ page: 2 }, “title 2”, “/page2”); |
history.back() | 加载历史记录列表中的前一个 URL,与用户点击浏览器的后退按钮相同。 | window.history.back(); |
history.forward() | 加载历史记录列表中的下一个 URL,与用户点击浏览器的前进按钮相同。 | window.history.forward(); |
history.go(delta) | 根据 delta 值加载历史记录中的特定页面。delta: 为正值时前进,为负值时后退。 | window.history.go(-1); // 后退一页 window.history.go(1); // 前进一页 |
history代码实现
class CustomHistory {
constructor() {
this.stack = [];
this.currentIndex = -1;
}
pushState(state, title, url) {
if (this.currentIndex < this.stack.length - 1) {
this.stack = this.stack.slice(0, this.currentIndex + 1);
}
this.stack.push({ state, title, url });
this.currentIndex++;
this.updateUrl(url);
}
replaceState(state, title, url) {
if(this.currentIndex >= 0){
this.stack[this.currentIndex] = { state, title, url };
this.updateUrl(url);
} else {
this.pushState(state, title, url);
}
}
go(index) {
const newIndex = this.currentIndex + index;
if (newIndex >= 0 && newIndex < this.stack.length) {
this.currentIndex = newIndex;
}
}
back(){
if(this.currentIndex > 0){
this.currentIndex--;
this.applyState();
}
}
forward(){
if(this.currentIndex < this.stack.length - 1){
this.currentIndex++;
this.applyState();
}
}
applyState() {
const currentState = this.stack[this.currentIndex];
this.updateUrl(currentState.url);
// this.dispatchPopStaet(currentState);
}
updateUrl(url) {
console.log("🚀 ~ CustomHistory ~ updateUrl ~ url:", url)
}
dispatchPopStaet(state){
const event = new CustomEvent('popstate', { detail: state });
window.dispatchEvent(event);
}
}
// Usage example:
const customHistory = new CustomHistory();
customHistory.pushState({ page: 1 }, "Title 1", "/page1");
customHistory.pushState({ page: 2 }, "Title 2", "/page2");
customHistory.replaceState({ page: 3 }, "Title 3", "/page3");
// window.addEventListener('popstate', (event) => {
// console.log('Popstate event:', event.detail);
// });
customHistory.back(); // Navigating to: /page1
customHistory.forward(); // Navigating to: /page3
customHistory.go(-1); // Navigating to: /page1