Windows 10 周年更新后的 Edge 14 的 HierarchyRequestError 报错

在升级到 Windows 10 周年更新后，使用系统自带的 Edge 浏览器浏览部分网站出现这种报错：

在网络上搜索 HierarchyRequestError 会找到同样的案例，大致都指向使用 appendChild 时报错，因此初步判定此报错是和节点操作相关。

翻看网络上的案例，发现大多是 appendChild 使用方法错误，而 Edge 的这个报错却是相同的代码在其他浏览器和之前版本的 Edge 下都没有出现的问题，所以应该不会是粗心造成的低级错误，可能是浏览器本身的问题。

但毕竟要解决不是。

既然看到 Avalon 1.5.5 报错，那么根据浏览器报错阅读源码，发现错误是出现在 ms-repeat 指令中：

while (elem.firstChild) {binding.template.appendChild(elem.firstChild)  // 这里报错
}

那么推断，这里的操作被最新的 Edge 认为是“将不合适的节点 append 到了另一个不合适的节点中”。

经过一番排查，发现问题是出在 avalonFragment 上。Avalon 中的所有 fragment 都是通过 avalonFragment.cloneNode(false) 创建的，那么把这些 fragment 都改为由 document.createDocumentFragment() 创建，错误果然消失。

那么做一个精简的报错案例：

<!-- Windows 10 周年更新后的 Edge 14 下会报 HierarchyRequestError 的用法 -->
<div id="test-div"></div><script>var fragment = document.createDocumentFragment();var newFragment = fragment.cloneNode(false);var newDIV = document.createElement("div");newDIV.innerHTML = "newDIV";newFragment.appendChild(newDIV);fragment.appendChild(newFragment);document.querySelector("#test-div").appendChild(fragment);
</script>

所以解决方法也很简单，暂时不要使用 cloneNode 的方式创建 Fragment 然后又将其 append 到另一个 clone 出来的 Fragment 中，用 document.createDocumentFragment() 代替。

有意思的是，如果是 cloneNode 一个 element 比如 div 则不会报错，因此很可能是 Edge 14 自己的 Bug。

皆大欢喜。_(:3」∠)_

Windows 10 周年更新后的 Edge 14 的 HierarchyRequestError 报错相关推荐

windows10系统更新后，Edge或者Chrome浏览器报错：“STATUS_INVALID_IMAGE_HASH”
报错产生原因: (一)windows10系统更新后 (二)某些开发工具如vsCode,安装了open in browser插件,开发时打开默认浏览器 Edge或者Chrome浏览器报错:"S ...
Windows 10 周年更新后TPM的一个bug？
迟迟等不到推送更新,终于忍不住手动更新了.还是那句话,我很喜欢现在更新的方式,让Windows不会越来越臃肿. 升级完后一般我有一周的适应期,检查兼容性之类.目前的已知问题有,插入Kindle蓝屏-- ...
微软修复Windows 10周年更新KB3194496累积更新安装问题
9月28日,微软面向Slow和Release Preview通道用户发送累积更新KB3194496,升级后版本号为Build 14393.222,不过不少用户反馈称安装失败,弹出"无法执行更 ...
Windows 10 周年更新正式版下载 + win10 快捷键
Windows 10 周年更新正式版 360云资源总汇(施工中): https://yunpan.cn/c6Svi7Az52XBs (提取码:e5dd) 今后提到周年更新版.1607版或RS1版,都 ...
小米5更新后android studio 通过USB安装报错：install_canceled_by_user
之前遇到过这个问题,无非是usb调试没有打开:又或者是没有及时在手机上点击确认:在或者不管怎么样rebuild或者重启手机就能成功,但是在2016年11月24号更新了miui系统后,不管怎么样都会遇到 ...
小米系统更新后android studio 通过USB安装报错：install_canceled_by_user
之前我也曾在Android Studio 安装应用失败总结一文中总结过这个问题,无非是usb调试没有打开:又或者是没有及时在手机上点击确认:再或者不管怎么样rebuild或者重启手机就能成功,但不知道 ...
Windows 10“创作者更新”改进了高DPI缩放支持
即将于下周正式发布的 Windows 10"创作者更新"将带来诸多激动人心的新功能,但它其实还包含了许多底层的小改进,比如更好地支持高 DPI 显示屏.在 Windows 10&q ...
微信与此ipad不兼容电脑也显示设备版本过低9.0_iOS系统出现怪异Bug：iPhone/iPad没法正常用；微软计划6月开测Windows 10 21H1更新...
IT服务圈儿有温度.有态度的IT自媒体平台开发者头条 1.Microsoft Edge 83 稳定版发布微软推出了 Microsoft Edge 83 稳定版(83.0.478.37),现在 ...
Windows 10累积更新发布：RS3正式版前最后一更
Windows 10用户很快将能够通过Update Assistant工具手动安装Windows 10创作者更新.而在正式版到来之前这仅剩的一点空白时间当中,微软又发布了两个累积更新来优化体验.今天发 ...

Windows 10 周年更新后的 Edge 14 的 HierarchyRequestError 报错

Windows 10 周年更新后的 Edge 14 的 HierarchyRequestError 报错相关推荐

最新文章

热门文章