From 56ff61e4784b140a68a57a1489d6a1a647f7c4e8 Mon Sep 17 00:00:00 2001 From: yiludege Date: Tue, 1 Nov 2022 16:04:29 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=97=A0=E7=95=8C?= =?UTF-8?q?=E4=B8=BB=E5=BA=94=E7=94=A8=E5=86=85=E5=B5=8C=E5=9C=A8iframe?= =?UTF-8?q?=E5=86=85=E9=83=A8=E6=8A=A5=E9=94=99=20(#246)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/guide/jump.md | 5 ++--- packages/wujie-core/src/common.ts | 2 -- packages/wujie-core/src/proxy.ts | 12 ++++++------ packages/wujie-core/src/sandbox.ts | 4 ++++ 4 files changed, 12 insertions(+), 11 deletions(-) diff --git a/docs/guide/jump.md b/docs/guide/jump.md index c08bad49f..f6bed6900 100644 --- 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 index 6b59daa8f..2a16ce0bd 100644 --- 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 index 31c9715e0..de5066bc8 100644 --- 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,12 +79,12 @@ 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; @@ -92,7 +92,7 @@ export function proxyGenerator( }); } 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 index 02f40d77a..b24bce40b 100644 --- a/packages/wujie-core/src/sandbox.ts +++ b/packages/wujie-core/src/sandbox.ts @@ -124,6 +124,8 @@ export default class Wujie { idToSandboxMap: Map; appEventObjMap: Map; 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;