问题描述
我正在开发SPA,必须使用部分零件库进行更新。现在,根据即时通讯要求的文件扩展名设置xhr.responseType = document,在本例中为.html
我用来向浏览器打印响应的本地库使用innerHTML替换容器的视图,并使用insertAdjacentHTML追加到该视图。这不再起作用了,因为响应现在是HTML文档而不是纯文本,我打印到网页上的全部是:
[对象HTMLDocument]
现在响应也将自动包含“ html”,“ head”和“ body”标签
我如何处理将其附加到容器或替换容器内容的响应?
我尝试的第一件事是
outputDiv.innerHTML = new XMLSerializer().serializetoString(response);
但是将其从html文档转换为字符串,然后使用regex对其进行操作以删除html,head和body标签,然后使用innerHTML再次将其解析为HTML,实在是太客气了。
然后我尝试
<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);
}
});
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)