fix: 修复降级场景下文档非标准模式问题 (#312)

close #302
Tencent · Dec 7, 2022 · d21365a · d21365a
1 parent 4c78172
commit d21365a
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 12 deletions.
diff --git a/packages/wujie-core/src/sandbox.ts b/packages/wujie-core/src/sandbox.ts
@@ -12,8 +12,8 @@ import {
   getPatchStyleElements,
   renderElementToContainer,
   renderTemplateToShadowRoot,
-  createIframeContainer,
   renderTemplateToIframe,
+  initRenderIframeAndContainer,
   removeLoading,
 } from "./shadow";
 import { proxyGenerator, localGenerator } from "./proxy";
@@ -183,10 +183,9 @@ export default class Wujie {
 
     /* 降级处理 */
     if (this.degrade) {
-      const iframe = createIframeContainer(this.id, this.degradeAttrs);
       const iframeBody = rawDocumentQuerySelector.call(iframeWindow.document, "body") as HTMLElement;
-      this.el = renderElementToContainer(iframe, el ?? iframeBody);
-      clearChild(iframe.contentDocument);
+      const { iframe, container } = initRenderIframeAndContainer(this.id, el ?? iframeBody, this.degradeAttrs);
+      this.el = container;
       // 销毁js运行iframe容器内部dom
       if (el) clearChild(iframeBody);
       // 修复vue的event.timeStamp问题
@@ -197,7 +196,7 @@ export default class Wujie {
       };
       if (this.document) {
         if (this.alive) {
-          iframe.contentDocument.appendChild(this.document.documentElement);
+          iframe.contentDocument.replaceChild(this.document.documentElement, iframe.contentDocument.documentElement);
           // 保活场景需要事件全部恢复
           recoverEventListeners(iframe.contentDocument.documentElement, iframeWindow);
         } else {

diff --git a/packages/wujie-core/src/shadow.ts b/packages/wujie-core/src/shadow.ts
@@ -86,6 +86,23 @@ export function renderElementToContainer(
   return container;
 }
 
+/**
+ * 将降级的iframe挂在到容器上并进行初始化
+ */
+export function initRenderIframeAndContainer(
+  id: string,
+  parent: string | HTMLElement,
+  degradeAttrs: { [key: string]: any } = {}
+): { iframe: HTMLIFrameElement; container: HTMLElement } {
+  const iframe = createIframeContainer(id, degradeAttrs);
+  const container = renderElementToContainer(iframe, parent);
+  const contentDocument = iframe.contentWindow.document;
+  contentDocument.open();
+  contentDocument.write("<!DOCTYPE html><html><head></head><body></body></html>");
+  contentDocument.close();
+  return { iframe, container };
+}
+
 /**
  * 处理css-before-loader 以及 css-after-loader
  */
@@ -237,13 +254,11 @@ export async function renderTemplateToIframe(
   iframeWindow: Window,
   template: string
 ): Promise<void> {
-  // 清除iframe
-  clearChild(renderDocument);
   // 插入template
   const html = renderTemplateToHtml(iframeWindow, template);
   // 处理 css-before-loader 和 css-after-loader
   const processedHtml = await processCssLoaderForTemplate(iframeWindow.__WUJIE, html);
-  renderDocument.appendChild(processedHtml);
+  renderDocument.replaceChild(processedHtml, renderDocument.documentElement);
 
   // 修复 html parentNode
   Object.defineProperty(renderDocument.documentElement, "parentNode", {

diff --git a/packages/wujie-core/src/sync.ts b/packages/wujie-core/src/sync.ts
@@ -1,6 +1,6 @@
 import { anchorElementGenerator, getAnchorElementQueryMap, getSyncUrl, appRouteParse, getDegradeIframe } from "./utils";
 import { renderIframeReplaceApp, patchEventTimeStamp } from "./iframe";
-import { renderElementToContainer, createIframeContainer, clearChild } from "./shadow";
+import { renderElementToContainer, initRenderIframeAndContainer } from "./shadow";
 import { getWujieById, rawDocumentQuerySelector } from "./common";
 
 /**
@@ -146,9 +146,7 @@ export function processAppForHrefJump(): void {
         } else if (sandbox.hrefFlag) {
           if (sandbox.degrade) {
             // 走全套流程，但是事件恢复不需要
-            const iframe = createIframeContainer(sandbox.id, sandbox.degradeAttrs);
-            renderElementToContainer(iframe, sandbox.el);
-            clearChild(iframe.contentDocument);
+            const { iframe } = initRenderIframeAndContainer(sandbox.id, sandbox.el, sandbox.degradeAttrs);
             patchEventTimeStamp(iframe.contentWindow, sandbox.iframe.contentWindow);
             iframe.contentWindow.onunload = () => {
               sandbox.unmount();