feat: 子应用判断window.window为window (#69)

* feat: 子应用判断window.window为window * docs: 文档更新
Tencent · Aug 16, 2022 · 66c528b · 66c528b
1 parent 1423838
commit 66c528b
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 5 deletions.
diff --git a/packages/wujie-core/src/iframe.ts b/packages/wujie-core/src/iframe.ts
@@ -38,6 +38,8 @@ declare global {
     __WUJIE_RAW_DOCUMENT_QUERY_SELECTOR__: typeof Document.prototype.querySelector;
     // 原生的querySelector
     __WUJIE_RAW_DOCUMENT_QUERY_SELECTOR_ALL__: typeof Document.prototype.querySelectorAll;
+    // 原生的window对象
+    __WUJIE_RAW_WINDOW__: Window;
     // 子应用沙盒实例
     __WUJIE: WuJie;
     // 子应用mount函数
@@ -92,7 +94,7 @@ function patchIframeEvents(iframeWindow: Window) {
       return rawAddEventListener.call(iframeWindow, type, listener, options);
     }
     // 在子应用嵌套场景使用window.window获取真实window
-    rawAddEventListener.call(window.window, type, listener, options);
+    rawAddEventListener.call(window.__WUJIE_RAW_WINDOW__ || window, type, listener, options);
   };
 
   iframeWindow.removeEventListener = function removeEventListener<K extends keyof WindowEventMap>(
@@ -106,13 +108,14 @@ function patchIframeEvents(iframeWindow: Window) {
     if (iframeAddEventListenerEvents.includes(type)) {
       return rawRemoveEventListener.call(iframeWindow, type, listener, options);
     }
-    rawRemoveEventListener.call(window.window, type, listener, options);
+    rawRemoveEventListener.call(window.__WUJIE_RAW_WINDOW__ || window, type, listener, options);
   };
 }
 
 function patchIframeVariable(iframeWindow: Window, appHostPath: string): void {
   iframeWindow.__WUJIE_PUBLIC_PATH__ = appHostPath + "/";
   iframeWindow.$wujie = iframeWindow.__WUJIE.provide;
+  iframeWindow.__WUJIE_RAW_WINDOW__ = iframeWindow;
   iframeWindow.__WUJIE_RAW_DOCUMENT_QUERY_SELECTOR__ = iframeWindow.Document.prototype.querySelector;
   iframeWindow.__WUJIE_RAW_DOCUMENT_QUERY_SELECTOR_ALL__ = iframeWindow.Document.prototype.querySelectorAll;
 }

diff --git a/packages/wujie-core/src/proxy.ts b/packages/wujie-core/src/proxy.ts
@@ -46,7 +46,7 @@ export function proxyGenerator(
         return target.__WUJIE.proxyLocation;
       }
       // 判断自身
-      if (p === "self") {
+      if (p === "self" || p === "window") {
         return target.__WUJIE.proxy;
       }
       // 不要绑定this

diff --git a/packages/wujie-doc/docs/guide/plugin.md b/packages/wujie-doc/docs/guide/plugin.md
@@ -270,7 +270,7 @@ const plugins = [
   },
 ];
 ```
-
+<!-- 
 ## windowPropertyOverride
 
 自定义子应用`window`的属性
@@ -306,4 +306,4 @@ const plugins = [
     },
   },
 ];
-```
+``` -->
diff --git a/packages/wujie-doc/docs/guide/variable.md b/packages/wujie-doc/docs/guide/variable.md
@@ -11,6 +11,8 @@ declare global {
     __WUJIE_RAW_DOCUMENT_QUERY_SELECTOR__: typeof Document.prototype.querySelector;
     // 原生的querySelectorAll
     __WUJIE_RAW_DOCUMENT_QUERY_SELECTOR_ALL__: typeof Document.prototype.querySelectorAll;
+    // 原生的window对象
+    __WUJIE_RAW_WINDOW__: Window;
     // 子应用沙盒实例
     __WUJIE: WuJie;
     // 子应用mount函数
@@ -52,6 +54,13 @@ declare global {
 
 - **描述：** 子应用的 document.querySelectorAll 都被劫持到 webcomponent 上，如果需要没有劫持的 querySelectorAll 可以使用此变量
 
+## `__WUJIE_RAW_WINDOW__`
+
+- **类型：** `Window`
+
+- **描述：** 子应用的原生 window 对象
+
+
 ## `__WUJIE`
 
 - **类型：** `Wujie`

diff --git a/packages/wujie-doc/docs/question/README.md b/packages/wujie-doc/docs/question/README.md
@@ -74,3 +74,11 @@ ctx.set("Access-Control-Allow-Origin", ctx.headers.origin);
 **解决方案：** 
 - 主应用提供一个路径比如说 `https://host/empty` ，这个路径返回不包含任何内容，子应用设置 attr 为 `{src:'https://host/empty'}`，这样 iframe 的 src 就是 `https://host/empty`
 - 在主应用 template 的 head 第一个元素插入一个`<script>if(window.parent !== window) {window.stop()}</script>`这样的标签应该可以避免主应用代码污染
+
+
+## 9、子应用 window 是一个代理对象，如何获取子应用的真实对象
+
+**原因：** 为何采用代理，原因详见[issue](https://github.com/Tencent/wujie/issues/63)
+
+**解决方案：** 
+- 采用 `window.__WUJIE_RAW_WINDOW__` 获取真实的 window 对象，[详见](/guide/variable.html#wujie-raw-window)