时间戳

首页 > 解决方案 > 当 responseType = document 时如何附加 XHR HTML 部分

javascript - 当 responseType = document 时如何附加 XHR HTML 部分

问题描述

我正在开发一个 SPA，并且我必须用来获取部分更新的库。现在它正在根据我请求的文件的扩展名设置 xhr.responseType = 文档，在这种情况下是 .html

我用来打印对浏览器的响应的本地库使用 innerHTML 替换容器的视图，并使用 insertAdjacentHTML 附加到它。这不再起作用，因为响应现在是 HTML 文档而不是纯文本，我打印到网页上的所有内容是：

[对象 HTMLDocument]

现在，响应也自动使用“html”、“head”和“body”标签进行包装

如何处理此类响应以将其附加到容器或替换容器的内容？

我尝试的第一件事是

outputDiv.innerHTML = new XMLSerializer().serializeToString(response);

但是，将其从 html 文档转换为字符串，然后使用正则表达式对其进行操作以删除 html、head 和 body 标记并使用 innerHTML 再次将其解析为 HTML，这太 hackish 了。

然后我尝试了

<div id="fullWrapper">
    <p>Container full of content</p>
</div>


myXHR('modules/menu/views/menu.html', function(response) {
        const outputDIV = document.getElementById('fullWrapper');
        outputDiv.appendChild(response.documentElement);
    });

奇迹般地它在 chrome 中工作，但这种方法的问题在于它还附加了 HTML HEAD 和 BODY 开始和结束标记以及部分内容，因此部分 menu.html 仅包含下一个代码

<p>Partial content</p>

变成

<html>
    <head></head>
<body>

<p>Partial content</p>

</body>
</html>

当我用上面的代码附加它时，结果不是 id 所谓的语义；）

<div id="fullWrapper">
    <html>
        <head></head>
    <body>

    <p>Partial content</p>

    </body>
    </html>
</div>

我也试过

<div id="fullWrapper">
    <p>Container full of content</p>
</div>


myXHR('modules/menu/views/menu.html', function(response) {
        const outputDIV = document.getElementById('fullWrapper');
        outputDiv.appendChild(response.documentElement.querySelector('element'));
    });

当局部只有一个孩子但我不一定知道哪个元素或哪些元素将出现在局部时，这“很好”，因此首选更通用的方法。

编辑 1

我还可以遍历每个孩子，也可以将其附加到文档片段以避免在部分有很​​多节点时重绘。反正这种做法也感觉不对。一定会有更好的办法。

<div id="fullWrapper">
    <p>Container full of content</p>
</div>


myXHR('modules/menu/views/menu.html', function(response) {
        const outputDIV = document.getElementById('fullWrapper');
        let children = response.documentElement.querySelector('body').children);
for (let item of children) {
    outputDiv.appendChild(item);
}
    });

标签： javascriptxmlhttprequestsingle-page-applicationpartials

解决方案

推荐阅读