Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 2 commits into from
Aug 16, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 5 additions & 2 deletions packages/wujie-core/src/iframe.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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函数
Expand Down Expand Up @@ -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>(
Expand All @@ -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;
}
Expand Down
2 changes: 1 addition & 1 deletion packages/wujie-core/src/proxy.ts
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ export function proxyGenerator(
return target.__WUJIE.proxyLocation;
}
// 判断自身
if (p === "self") {
if (p === "self" || p === "window") {
return target.__WUJIE.proxy;
}
// 不要绑定this
Expand Down
4 changes: 2 additions & 2 deletions packages/wujie-doc/docs/guide/plugin.md
Original file line number Diff line number Diff line change
Expand Up @@ -270,7 +270,7 @@ const plugins = [
},
];
```

<!--
## windowPropertyOverride

自定义子应用`window`的属性
Expand Down Expand Up @@ -306,4 +306,4 @@ const plugins = [
},
},
];
```
``` -->
9 changes: 9 additions & 0 deletions packages/wujie-doc/docs/guide/variable.md
Original file line number Diff line number Diff line change
Expand Up @@ -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函数
Expand Down Expand Up @@ -52,6 +54,13 @@ declare global {

- **描述:** 子应用的 document.querySelectorAll 都被劫持到 webcomponent 上,如果需要没有劫持的 querySelectorAll 可以使用此变量

## `__WUJIE_RAW_WINDOW__`

- **类型:** `Window`

- **描述:** 子应用的原生 window 对象


## `__WUJIE`

- **类型:** `Wujie`
Expand Down
8 changes: 8 additions & 0 deletions packages/wujie-doc/docs/question/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)