jQuery AJAX请求后如何将返回的完整HTML页面直接作为正常页面渲染

实现方案 #

你要的效果可以通过以下两种方式实现，均不需要额外引入其他依赖，原生JS就能完成： #

方案1（最推荐，和普通页面加载表现完全一致）

直接调用文档写入API，让浏览器按照正常的页面解析流程处理返回的完整HTML内容，包括DOCTYPE声明、外部样式/脚本、内联脚本都能正常执行，和普通表单提交后的渲染效果完全相同：

else if (bar) {        
    document.open();
    document.write(response);
    document.close();
}

该操作会完全清除当前页面的所有内容、内存中的JS变量和事件监听，和直接访问新页面的表现完全一致。 #

方案2（替换根节点内容，无document.write）

如果你的场景不允许使用document.write，可以直接替换整个HTML根节点的内容：

else if (bar) {        
    document.documentElement.innerHTML = response;
}

注意该方案不会处理服务端返回的DOCTYPE声明，可能会导致页面渲染模式异常，仅建议返回的HTML没有DOCTYPE声明时使用。 #

补充说明 #

如果需要支持用户点击浏览器后退按钮回到操作前的页面，可以在写入新内容前新增历史记录：

history.pushState({}, '', location.href)

普通表单提交默认不会保留当前页面的历史记录，无相关需求可以省略该配置。

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