Match-id-f0db62c081ebe5632931ae3baa89c6cd6112c041

CHANGELOG.md

@@ -1,3 +1,6 @@
+## 0.0.36 (2023-01-30)
+- **core**: #100 horizon从上层页面透传到iframe页面里使用，创建的dom元素instanceof HTMLElement为false
+
 ## 0.0.35 (2023-01-28)
 - **core**: 在 cloneDeep JSXElement 的时候会出现死循环
 

libs/horizon/package.json

@@ -4,7 +4,7 @@
   "keywords": [
     "horizon"
   ],
-  "version": "0.0.35",
+  "version": "0.0.36",
   "homepage": "",
   "bugs": "",
   "main": "index.js",

libs/horizon/src/dom/DOMOperator.ts

@@ -16,7 +16,7 @@
 import { saveVNode, updateVNodeProps } from './DOMInternalKeys';
 import { createDom } from './utils/DomCreator';
 import { getSelectionInfo, resetSelectionRange, SelectionData } from './SelectionRangeHandler';
-import { shouldAutoFocus } from './utils/Common';
+import { isDocument, shouldAutoFocus } from './utils/Common';
 import { NSS } from './utils/DomCreator';
 import { adjustStyleValue } from './DOMPropertiesHandler/StyleHandler';
 import type { VNode } from '../renderer/Types';
@@ -26,6 +26,7 @@ import { isNativeElement, validateProps } from './validators/ValidateProps';
 import { watchValueChange } from './valueHandler/ValueChangeHandler';
 import { DomComponent, DomText } from '../renderer/vnode/VNodeTags';
 import { updateCommonProp } from './DOMPropertiesHandler/UpdateCommonProp';
+import {getCurrentRoot} from '../renderer/RootStack';
 
 export type Props = Record<string, any> & {
   autoFocus?: boolean;
@@ -70,7 +71,12 @@ export function resetAfterSubmit(): void {
 
 // 创建 DOM 对象
 export function newDom(tagName: string, props: Props, parentNamespace: string, vNode: VNode): Element {
-  const dom: Element = createDom(tagName, parentNamespace);
+  // document取值于treeRoot对应的DOM的ownerDocument。
+  // 解决：在iframe中使用top的horizon时，horizon在创建DOM时用到的document并不是iframe的document，而是top中的document的问题。
+  const rootDom = getCurrentRoot().realNode;
+  const doc = isDocument(rootDom) ? rootDom : rootDom.ownerDocument;
+
+  const dom: Element = createDom(tagName, parentNamespace, doc);
   // 将 vNode 节点挂到 DOM 对象上
   saveVNode(vNode, dom);
   // 将属性挂到 DOM 对象上

libs/horizon/src/dom/utils/DomCreator.ts

@@ -20,15 +20,15 @@ export const NSS = {
 };
 
 // 创建DOM元素
-export function createDom(tagName: string, parentNamespace: string): Element {
+export function createDom(tagName: string, parentNamespace: string, doc: Document): Element {
   let dom: Element;
   const selfNamespace = NSS[tagName] || NSS.html;
   const ns = parentNamespace !== NSS.html ? parentNamespace : selfNamespace;
 
   if (ns !== NSS.html) {
-    dom = document.createElementNS(ns, tagName);
+    dom = doc.createElementNS(ns, tagName);
   } else {
-    dom = document.createElement(tagName);
+    dom = doc.createElement(tagName);
   }
   return dom;
 }

libs/horizon/src/renderer/RootStack.ts

@@ -14,6 +14,7 @@
  */
 
 import { VNode } from './vnode/VNode';
+
 const currentRootStack: VNode[] = [];
 export function getCurrentRoot() {
   return currentRootStack[currentRootStack.length - 1];