子应用使用innerHTML生成子节点时候会出现instanceof异常 #256
Comments
|
附上demo1 demo2的代码： <!DOCTYPE html>
<html lang="en">
<body>
<div id="result"></div>
<script>
const parent = document.createElement('div')
parent.innerHTML = '<div id="child"></div>'
document.body.appendChild(parent)
const child = document.querySelector('#child')
console.log(child instanceof HTMLElement) // false
document.getElementById('result').innerHTML = `child instanceof HTMLElement: ${child instanceof HTMLElement}`
</script>
</body>
</html>demo2代码 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo2</title>
</head>
<body>
<div id="result"></div>
<script>
const parent = document.createElement('div')
parent.innerHTML = '<div id="child"></div>'
document.body.appendChild(parent)
parent.querySelector('#child') // 先使用parent querySelector
const child = document.querySelector('#child')
console.log(child instanceof HTMLElement) // true
document.getElementById('result').innerHTML = `child instanceof HTMLElement: ${child instanceof HTMLElement}`
</script>
</body>
</html> |
|
这个地方确实比较奇怪，不过 docuemnt.createElement 统一用的是父应用的 document.createElement 如果要判断元素是否是 htmlElement 可以用 (child instanceof HTMLElement || child instanceof window.top.HTMLElement) ? |
|
其实这个是我这边用了quill这个编辑器发现的，像这种第三方库，多处出现这种 instanceof HTMLElement 、 instanceof Text ，还有就是代码混淆过，使用jsloader去替换，要考虑的情景很多，正则写起来也很吃力 |
|
@yiludege 这个是我这边目前workaround的做法 const raw = window.HTMLElement;
window.HTMLElement = new Proxy(raw, {
get(target, p ,receiver) {
if (p === Symbol.hasInstance) {
return function (obj) {
const res = Object.[Symbol.hasInstance].apply(this, arguments) // 默认行为
if (res) return res
if (obj instanceof window.parent.HTMLElement) return true // 父容器HTMLElemnt对比
return false
}
}
return Reflect.get(target, p ,receiver);
}
}) |
|
有小伙伴遇到类似问题，临时解决方法可以参考楼上👆 |
Closed
|
在这个 #275 中已经将createElement等替换成iframe的原生的，但是还是存在这个问题，目前我这边也没有更好的方法，先这样处理吧 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
写了一个简单的demo
可以使用wujie在线预览的功能查看效果（https://wujie-micro.github.io/doc/wujie/）
demo1的链接：https://www.jarden.vip/wujie-demo/demo1.html
demo2的链接：https://www.jarden.vip/wujie-demo/demo2.html
场景描述：
问题描述：
期望值：
child instanceof HTMLElement 均为 true
The text was updated successfully, but these errors were encountered: