如何用原生JS通过XMLHttpRequest.responseText实现与window.location一致的页面加载？

可以实现，但需要手动补充地址栏URL更新和浏览器历史记录的处理逻辑，修复你当前代码存在的两处缺陷。

现有代码的核心问题 #

你的代码仅完成了页面HTML内容的替换，但未处理：

• 浏览器地址栏的URL未同步更新
• 未向浏览器历史栈添加新记录，导致回退行为不符合预期

修正后的完整代码 #

// Page 0中引入的JS代码
Button.addEventListener("click", (event) => {
    const HttpRequest = new XMLHttpRequest();
    const URL = '/new_url';
    
    HttpRequest.onreadystatechange = function () {
        if (HttpRequest.readyState === 4 && HttpRequest.status === 200) {
            // 替换当前页面的HTML内容
            document.open();
            document.write(HttpRequest.responseText);
            document.close();
            
            // 更新地址栏URL并添加历史记录，对齐window.location的行为
            window.history.pushState({}, '', URL);
        }
    };
    
    HttpRequest.open('GET', URL, true);
    HttpRequest.send(null);
});

补充回退行为处理 #

仅添加历史记录还不够，因为浏览器回退时不会自动恢复原页面（Page 0）的内容，需要监听popstate事件来处理回退操作：

window.addEventListener('popstate', () => {
    // 回退时重新加载当前URL对应的页面，还原原生回退逻辑
    window.location.reload();
});

关键细节说明 #

• window.history.pushState()方法可以在不刷新页面的前提下，更新地址栏URL并向历史栈中添加一条新记录，这是对齐window.location历史行为的核心。
• 监听popstate事件是因为直接替换HTML后，浏览器的回退操作只会触发历史栈的变化，不会自动恢复原页面内容，需要手动触发重新加载来还原原生体验。
• 与window.location的微小差异：window.location会完全重置页面执行环境（包括重新加载所有资源、重置全局状态），而XHR替换HTML的方式会保留当前页面的JS上下文，若你的页面存在全局状态依赖，需要额外处理状态重置逻辑。

内容的提问来源于stack exchange，提问作者Wang Tim