不刷新页面修改URL的方法

技术背景

在网页开发中，有时我们需要在不刷新页面的情况下修改URL，以实现单页面应用（SPA）的效果，提升用户体验。例如，在用户进行一些操作时，更新URL可以方便用户分享当前页面状态，同时也有助于搜索引擎优化。

实现步骤

使用 HTML5 的 history.pushState() 和 history.replaceState() 方法

• history.pushState() 方法可以添加一个新的历史记录条目，同时修改URL，而不会重新加载页面。
• history.replaceState() 方法可以修改当前的历史记录条目，同样不会重新加载页面。

检测用户的前进和后退操作

可以使用 window.onpopstate 或 window.addEventListener 来检测用户点击浏览器的前进和后退按钮。

改变 URL 的哈希部分

修改 window.location.hash 也可以改变URL，并且不会重新加载页面。可以通过监听 window.onhashchange 事件来响应哈希值的变化。

核心代码

使用 history.pushState()

function processAjaxData(response, urlPath){
    document.getElementById("content").innerHTML = response.html;
    document.title = response.pageTitle;
    window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", urlPath);
}

window.addEventListener("popstate", (e) => {
    if(e.state){
        document.getElementById("content").innerHTML = e.state.html;
        document.title = e.state.pageTitle;
    }
});

使用 history.replaceState()

if (window.history.replaceState) {
    // prevents browser from storing history with each change
    window.history.replaceState(statedata, title, url);
}

改变 URL 的哈希部分

window.location.hash = "example";

window.onhashchange = function () {
    console.log("#changed", window.location.hash);
}

最佳实践

• 在使用 history.pushState() 和 history.replaceState() 时，确保传递合适的状态对象和标题，以便在用户前进或后退时能正确恢复页面状态。
• 对于不支持 HTML5 的浏览器，可以使用 window.location.hash 作为替代方案。
• 如果需要兼容更多浏览器，可以使用 History.js 库，它封装了 HTML5 的历史状态功能，并为 HTML4 浏览器提供了额外的支持。

常见问题

• 兼容性问题：history.pushState() 和 history.replaceState() 方法在较旧的浏览器中可能不被支持。可以通过检测 typeof history.pushState 是否为 undefined 来判断浏览器是否支持。

function goTo(page, title, url) {
    if ("undefined" !== typeof history.pushState) {
        history.pushState({page: page}, title, url);
    } else {
        window.location.assign(url);
    }
}

• URL 安全问题：虽然可以修改 URL，但不能通过修改 URL 来欺骗用户，例如将一个仿冒银行登录页面的 URL 修改为真实银行的 URL。这是不安全的，并且违反了道德和法律规定。