使用 XHR 更改 URL答案

【问题标题】：Change the URL with XHR使用 XHR 更改 URL
【发布时间】：2020-04-29 12:12:51
【问题描述】：

与问题一样，在发出请求后和加载页面内容后，如何使下面给出的代码更改浏览器中的 URL？我自己不知道怎么做，我已经尝试了好几天了。

如果可能，如何使从新页面加载的 JS 脚本（在请求之后）工作（innerHTML 不会解释为脚本的结果）。

document.addEventListener('click', function(event) {
  if (event.target.tagName !== "A" || !event.target.href) return;
    document.body.style.opacity = 0;
  event.preventDefault();
  document.body.addEventListener("transitionend", function() {
  var res = new XMLHttpRequest();
  res.addEventListener("load", function() {
       if (res.status != 200) {
 console.log(`Error ${res.status}: ${res.statusText}`);
  } else { 
    document.querySelector('html').innerHTML =
      this.response;
  }
  });
  res.open("GET", event.target.href);
  res.send();
});
});

如果需要更多说明，请在下方评论。

【问题讨论】：

这能回答你的问题吗？ How to change url in address bar?
先为旧页面创建一些 HTML 并立即更改位置没有多大意义。无论如何，如果您想从响应文本中执行脚本，首先您必须将内容放入documentFragment。然后创建新的空脚本元素，获取片段中已存在脚本的text 属性，并将该文本放入新创建的脚本元素。然后将新创建的脚本元素附加到片段，最后将片段附加到document.body。请注意，您必须保留原始的 html 标记。或者干脆使用常规形式...
@LuketheGeek 不，不是这样，我在 XHR 上寻找如何做到这一点，但我没有找到解决方案
@MAJO 你使用 XHR 停留在当前页面，尝试使用 XHR 替换整个页面的内容是没有用的（document.querySelector('html').innerHTML = .. 显示目标）。如果您需要加载新页面，请使用常规表单发送请求。
好吧，你已经被建议了，但祝你好运......

标签： javascript url animation xmlhttprequest

【解决方案1】：

其实你可以在AJAX回调中改变整个页面。准备后端代码以响应文档中包含的 DTD，并混淆所有结束脚本标记，例如。 <\/script>。然后，在回调中，这样做：

else { 
    document.write(res.responseText);
}

就是这样。但是，这违反了所有标准和良好做法，请勿使用。

【讨论】：

但我认为document.write 不是最佳做法。
@MAJO 绝对不是，但这是做你想做的事的唯一方法。也许你应该详细解释一下，为什么你想用 XHR 创建整个页面而不是加载一个新页面..？如果它与页面转换有关，我想这是你手头的真正问题，并且询问使用 XHR 加载页面实际上是一个 XY 问题。