fix: 修复无界主应用内嵌在iframe内部报错 (#246)

Tencent · Nov 1, 2022 · 56ff61e · 56ff61e
1 parent 6924cbe
commit 56ff61e
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 11 deletions.
diff --git a/docs/guide/jump.md b/docs/guide/jump.md
@@ -46,12 +46,11 @@ function handleJump() {
 ```javascript
 // 子应用 A 点击跳转处理函数
 function handleJump() {
-  window.$wujie?.props.jump({ path: "/pathB", query: { B: window.encodeURIComponent("/test") } });
+  window.$wujie?.props.jump({ path: "/pathB", query: { B: "/test" } });
 }
 ```
 
-由于跳转后的链接的查询参数带上了 B 应用的路径信息，而子应用 B 开启了路由同步的能力，所以能从 url 上读回需要同步的路径
-
+由于跳转后的链接的查询参数带上了 B 应用的路径信息，而子应用 B 开启了路由同步的能力，所以能从 url 上读回需要同步的路径，注意这种办法只有在 B 应用未曾激活过才生效。
 ### 子应用 B 为保活应用
 
 如果子应用 B 是保活应用并且没有被打开过，也就是还没有实例化，上述的打开指定路由的方式可以正常工作，但如果子应用 B 已经实例化，保活应用的内部数据和路由状态都会保存下来不随子应用切换而丢失。

diff --git a/packages/wujie-core/src/common.ts b/packages/wujie-core/src/common.ts
@@ -186,8 +186,6 @@ export const windowRegWhiteList = [
 
 // 保存原型方法
 // 子应用的Document.prototype已经被改写了
-export const rawCreateElement = window.top.Document.prototype.createElement;
-export const rawCreateTextNode = window.top.Document.prototype.createTextNode;
 export const rawElementAppendChild = HTMLElement.prototype.appendChild;
 export const rawElementRemoveChild = HTMLElement.prototype.removeChild;
 export const rawHeadInsertBefore = HTMLHeadElement.prototype.insertBefore;

diff --git a/packages/wujie-core/src/proxy.ts b/packages/wujie-core/src/proxy.ts
@@ -1,7 +1,7 @@
 import { patchElementEffect, renderIframeReplaceApp } from "./iframe";
 import { renderElementToContainer } from "./shadow";
 import { pushUrlToWindow } from "./sync";
-import { documentProxyProperties, rawDocumentQuerySelector, rawCreateElement, rawCreateTextNode } from "./common";
+import { documentProxyProperties, rawDocumentQuerySelector } from "./common";
 import { WUJIE_TIPS_RELOAD_DISABLED } from "./constant";
 import {
   getTargetValue,
@@ -79,20 +79,20 @@ export function proxyGenerator(
     {
       get: function (_fakeDocument, propKey) {
         const document = window.document;
-        const shadowRoot = iframe.contentWindow.__WUJIE.shadowRoot;
+        const { shadowRoot, inject, proxyLocation } = iframe.contentWindow.__WUJIE;
         // need fix
         if (propKey === "createElement" || propKey === "createTextNode") {
           return new Proxy(document[propKey], {
             apply(_createElement, _ctx, args) {
-              const rawCreateMethod = propKey === "createElement" ? rawCreateElement : rawCreateTextNode;
+              const rawCreateMethod = propKey === "createElement" ? inject.rawCreateElement : inject.rawCreateTextNode;
               const element = rawCreateMethod.apply(iframe.contentDocument, args);
               patchElementEffect(element, iframe.contentWindow);
               return element;
             },
           });
         }
         if (propKey === "documentURI" || propKey === "URL") {
-          return (iframe.contentWindow.__WUJIE.proxyLocation as Location).href;
+          return (proxyLocation as Location).href;
         }
 
         // from shadowRoot
@@ -217,7 +217,7 @@ export function localGenerator(
     createElement: {
       get: () => {
         return function (...args) {
-          const element = rawCreateElement.apply(iframe.contentDocument, args);
+          const element = sandbox.inject.rawCreateElement.apply(iframe.contentDocument, args);
           patchElementEffect(element, iframe.contentWindow);
           return element;
         };
@@ -226,7 +226,7 @@ export function localGenerator(
     createTextNode: {
       get: () => {
         return function (...args) {
-          const element = rawCreateTextNode.apply(iframe.contentDocument, args);
+          const element = sandbox.inject.rawCreateTextNode.apply(iframe.contentDocument, args);
           patchElementEffect(element, iframe.contentWindow);
           return element;
         };

diff --git a/packages/wujie-core/src/sandbox.ts b/packages/wujie-core/src/sandbox.ts
@@ -124,6 +124,8 @@ export default class Wujie {
     idToSandboxMap: Map<String, SandboxCache>;
     appEventObjMap: Map<String, EventObj>;
     mainHostPath: string;
+    rawCreateElement: typeof Document.prototype.createElement;
+    rawCreateTextNode: typeof Document.prototype.createTextNode;
   };
 
   /** 激活子应用
@@ -472,6 +474,8 @@ export default class Wujie {
         idToSandboxMap: idToSandboxCacheMap,
         appEventObjMap,
         mainHostPath: window.location.protocol + "//" + window.location.host,
+        rawCreateElement: window.document.createElement,
+        rawCreateTextNode: window.document.createTextNode,
       };
     }
     const { name, url, attrs, fiber, degrade, lifecycles, plugins } = options;