From 22553016a782149f259d4385be44eafc21d48fa1 Mon Sep 17 00:00:00 2001 From: UmbraCi <49011112+UmbraCi@users.noreply.github.com> Date: Sat, 27 May 2023 18:15:47 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E5=AD=90=E5=BA=94=E7=94=A8window?= =?UTF-8?q?=E4=BA=8B=E4=BB=B6=E7=9B=91=E5=90=AC=E5=A2=9E=E5=8A=A0message?= =?UTF-8?q?=E4=BA=8B=E4=BB=B6=EF=BC=8C=E5=A2=9E=E5=8A=A0=E4=BA=8B=E4=BB=B6?= =?UTF-8?q?=E7=9B=91=E5=90=ACtarget=E5=8F=AF=E9=80=89=E5=8F=82=E6=95=B0=20?= =?UTF-8?q?(#555)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit close #549 --- examples/main-vue/src/App.vue | 16 ++++++++++ examples/react17/src/Communication.js | 25 +++++++++++++++ packages/wujie-core/src/common.ts | 3 ++ packages/wujie-core/src/iframe.ts | 15 +++++---- pnpm-lock.yaml | 44 +++++++++++++++++---------- 5 files changed, 81 insertions(+), 22 deletions(-) diff --git a/examples/main-vue/src/App.vue b/examples/main-vue/src/App.vue index 7e4d83983..19edc567c 100644 --- a/examples/main-vue/src/App.vue +++ b/examples/main-vue/src/App.vue @@ -85,6 +85,12 @@ export default { degrade: window.Proxy, }; }, + mounted() { + window.addEventListener("message", this.handleMessage); + }, + beforeDestroy() { + window.removeEventListener("message", this.handleMessage); + }, methods: { close() { if (this.active) this.active = false; @@ -92,6 +98,14 @@ export default { handleFlag(name) { this[name + "Flag"] = !this[name + "Flag"]; }, + handleMessage(event) { + if (event.origin === location.origin && event.source !== window) { + console.log("父应用接收到消息：", event.data); + alert("父应用接收到消息：" + event.data); + // 将消息发送给子应用 + event.source.postMessage("Hello 子应用，我是父应用!", event.origin); + } + }, }, }; @@ -105,6 +119,7 @@ body { height: 100vh; --theme: rgb(241, 107, 95); } + #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; @@ -165,6 +180,7 @@ body { transform: translate(0, 0); box-shadow: 3px 0px 9px 2px #e6e6e6; } + #nav .menu-icon { position: absolute; left: 100%; diff --git a/examples/react17/src/Communication.js b/examples/react17/src/Communication.js index 61393df70..4624a3076 100644 --- a/examples/react17/src/Communication.js +++ b/examples/react17/src/Communication.js @@ -13,6 +13,25 @@ export default class Communication extends React.Component { handleEmit = () => { window.$wujie && window.$wujie.bus.$emit("click", "react17"); }; + + printfMessage = (e) => { + console.log('父级发过来的消息：',e.data) + alert('父级发过来的消息：' + e.data) + } + + sendPostMessage = () => { + // 向父级窗口发送消息 + window.parent.postMessage('Hello 父应用，我是子应用!', '*'); + }; + + componentDidMount() { + window.addEventListener("message", (e)=>this.printfMessage(e), { targetWindow: window.__WUJIE_RAW_WINDOW__ }); + } + + componentWillUnmount() { + window.removeEventListener("message", (e)=>this.printfMessage(e), { targetWindow: window.__WUJIE_RAW_WINDOW__ }); + } + render() { return (
@@ -38,6 +57,12 @@ export default class Communication extends React.Component {

+

4、通过window.parent.postMessage()方法往父级发送消息

+

父子应用通过postmessage传递消息

+

message监听和发送的时候注意source

+

+ +

); diff --git a/packages/wujie-core/src/common.ts b/packages/wujie-core/src/common.ts index 58e238546..2877731a4 100644 --- a/packages/wujie-core/src/common.ts +++ b/packages/wujie-core/src/common.ts @@ -5,6 +5,8 @@ export interface SandboxCache { options?: cacheOptions; } +export type appAddEventListenerOptions = AddEventListenerOptions & { targetWindow?: Window }; + // 全部无界实例和配置存储map export const idToSandboxCacheMap = window.__POWERED_BY_WUJIE__ ? window.__WUJIE.inject.idToSandboxMap @@ -163,6 +165,7 @@ export const appWindowAddEventListenerEvents = [ "load", "beforeunload", "unload", + "message", ]; // 子应用window.onXXX需要挂载到iframe沙箱上的事件 diff --git a/packages/wujie-core/src/iframe.ts b/packages/wujie-core/src/iframe.ts index 052507b60..424aa0720 100644 --- a/packages/wujie-core/src/iframe.ts +++ b/packages/wujie-core/src/iframe.ts @@ -32,6 +32,7 @@ import { rawWindowAddEventListener, rawWindowRemoveEventListener, } from "./common"; +import type { appAddEventListenerOptions } from "./common"; import { getJsLoader } from "./plugin"; import { WUJIE_TIPS_SCRIPT_ERROR_REQUESTED, WUJIE_DATA_FLAG } from "./constant"; import { ScriptObjectLoader } from "./index"; @@ -113,13 +114,14 @@ function patchIframeEvents(iframeWindow: Window) { iframeWindow.addEventListener = function addEventListener( type: K, listener: (this: Window, ev: WindowEventMap[K]) => any, - options?: boolean | AddEventListenerOptions + options?: boolean | appAddEventListenerOptions ) { // 运行插件钩子函数 execHooks(iframeWindow.__WUJIE.plugins, "windowAddEventListenerHook", iframeWindow, type, listener, options); - if (appWindowAddEventListenerEvents.includes(type)) { - return rawWindowAddEventListener.call(iframeWindow, type, listener, options); + if (appWindowAddEventListenerEvents.includes(type) || (typeof options === "object" && options.targetWindow)) { + const targetWindow = typeof options === "object" && options.targetWindow ? options?.targetWindow : iframeWindow; + return rawWindowAddEventListener.call(targetWindow, type, listener, options); } // 在子应用嵌套场景使用window.window获取真实window rawWindowAddEventListener.call(window.__WUJIE_RAW_WINDOW__ || window, type, listener, options); @@ -128,13 +130,14 @@ function patchIframeEvents(iframeWindow: Window) { iframeWindow.removeEventListener = function removeEventListener( type: K, listener: (this: Window, ev: WindowEventMap[K]) => any, - options?: boolean | AddEventListenerOptions + options?: boolean | appAddEventListenerOptions ) { // 运行插件钩子函数 execHooks(iframeWindow.__WUJIE.plugins, "windowRemoveEventListenerHook", iframeWindow, type, listener, options); - if (appWindowAddEventListenerEvents.includes(type)) { - return rawWindowRemoveEventListener.call(iframeWindow, type, listener, options); + if (appWindowAddEventListenerEvents.includes(type) || (typeof options === "object" && options.targetWindow)) { + const targetWindow = typeof options === "object" && options.targetWindow ? options?.targetWindow : iframeWindow; + return rawWindowRemoveEventListener.call(targetWindow, type, listener, options); } rawWindowRemoveEventListener.call(window.__WUJIE_RAW_WINDOW__ || window, type, listener, options); }; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5bef86095..5a11e974f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -144,7 +144,7 @@ importers: webpack-dev-server: ^4.6.0 webpack-manifest-plugin: ^4.0.2 workbox-webpack-plugin: ^6.4.1 - wujie-react: workspace:^1.0.8 + wujie-react: workspace:^1.0.16 dependencies: '@ant-design/icons': 4.7.0_sfoxds7t5ydpegc3knd667wn6m '@babel/core': 7.18.13 @@ -223,8 +223,8 @@ importers: vue-router: ^3.2.0 vue-template-compiler: ^2.6.11 whatwg-fetch: ^3.6.2 - wujie: workspace:^1.0.8 - wujie-vue2: workspace:^1.0.8 + wujie: workspace:^1.0.16 + wujie-vue2: workspace:^1.0.16 dependencies: ant-design-vue: 1.7.8_42puyn3dcxirnpdjnosl7pbb6a core-js: 3.25.0 @@ -307,7 +307,7 @@ importers: webpack-dev-server: ^4.6.0 webpack-manifest-plugin: ^4.0.2 workbox-webpack-plugin: ^6.4.1 - wujie-react: workspace:^1.0.8 + wujie-react: workspace:^1.0.16 dependencies: '@babel/core': 7.18.13 '@pmmmwh/react-refresh-webpack-plugin': 0.5.7_wt5p3h66kg5yz5633zrrqkcxnm @@ -695,7 +695,7 @@ importers: prop-types: ^15.8.1 webpack: ^5.61.0 webpack-cli: ^4.9.1 - wujie: workspace:1.0.8 + wujie: workspace:1.0.16 dependencies: prop-types: 15.8.1 wujie: link:../wujie-core @@ -723,7 +723,7 @@ importers: eslint-plugin-vue: ^8.0.3 webpack: ^5.61.0 webpack-cli: ^4.9.1 - wujie: workspace:1.0.8 + wujie: workspace:1.0.16 dependencies: wujie: link:../wujie-core devDependencies: @@ -751,7 +751,7 @@ importers: vue: ^3.0.0 webpack: ^5.61.0 webpack-cli: ^4.9.1 - wujie: workspace:1.0.8 + wujie: workspace:1.0.16 dependencies: wujie: link:../wujie-core devDependencies: @@ -5715,6 +5715,7 @@ packages: /@discoveryjs/json-ext/0.5.7: resolution: {integrity: sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==} engines: {node: '>=10.0.0'} + dev: true /@docsearch/css/3.2.1: resolution: {integrity: sha512-gaP6TxxwQC+K8D6TRx5WULUWKrcbzECOPA2KCVMuI+6C7dNiGUk5yXXzVhc5sld79XKYLnO9DRTI4mjXDYkh+g==} @@ -6813,7 +6814,7 @@ packages: lru-cache: 6.0.0 mkdirp: 1.0.4 npm-pick-manifest: 6.1.1 - promise-inflight: 1.0.1_bluebird@3.7.2 + promise-inflight: 1.0.1 promise-retry: 2.0.1 semver: 7.3.5 which: 2.0.2 @@ -6830,7 +6831,7 @@ packages: mkdirp: 1.0.4 npm-pick-manifest: 7.0.2 proc-log: 2.0.1 - promise-inflight: 1.0.1_bluebird@3.7.2 + promise-inflight: 1.0.1 promise-retry: 2.0.1 semver: 7.3.7 which: 2.0.2 @@ -9622,6 +9623,7 @@ packages: dependencies: webpack: 5.74.0_webpack-cli@4.10.0 webpack-cli: 4.10.0_webpack@5.74.0 + dev: true /@webpack-cli/info/1.5.0_webpack-cli@4.10.0: resolution: {integrity: sha512-e8tSXZpw2hPl2uMJY6fsMswaok5FdlGNRTktvFk2sD8RjH0hE2+XistawJx1vmKteh4NmGmNUrp+Tb2w+udPcQ==} @@ -9630,6 +9632,7 @@ packages: dependencies: envinfo: 7.8.1 webpack-cli: 4.10.0_webpack@5.74.0 + dev: true /@webpack-cli/serve/1.7.0_webpack-cli@4.10.0: resolution: {integrity: sha512-oxnCNGj88fL+xzV+dacXs44HcDwf1ovs3AuEzvP7mqXw7fQntqIhQ1BRmynh4qEKQSSSRSWVyXRjmTbZIX9V2Q==} @@ -9641,6 +9644,7 @@ packages: optional: true dependencies: webpack-cli: 4.10.0_webpack@5.74.0 + dev: true /@xtuc/ieee754/1.2.0: resolution: {integrity: sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==} @@ -10653,7 +10657,6 @@ packages: pify: 4.0.1 schema-utils: 2.7.1 webpack: 4.44.2 - dev: false optional: true /babel-loader/8.1.0_tb6moc662p5idmcg3l5ipbhpta: @@ -10714,7 +10717,7 @@ packages: loader-utils: 2.0.2 make-dir: 3.1.0 schema-utils: 2.7.1 - webpack: 5.74.0_webpack-cli@4.10.0 + webpack: 5.74.0 /babel-plugin-dynamic-import-node/2.2.0: resolution: {integrity: sha512-fP899ELUnTaBcIzmrW7nniyqqdYWrWuJUyPWHxFa/c7r7hS6KC8FscNfLlBNIoPSc55kYMGEEKjPjJGCLbE1qA==} @@ -11429,7 +11432,7 @@ packages: minipass-pipeline: 1.2.4 mkdirp: 1.0.4 p-map: 4.0.0 - promise-inflight: 1.0.1_bluebird@3.7.2 + promise-inflight: 1.0.1 rimraf: 3.0.2 ssri: 8.0.1 tar: 6.1.11 @@ -11455,7 +11458,7 @@ packages: minipass-pipeline: 1.2.4 mkdirp: 1.0.4 p-map: 4.0.0 - promise-inflight: 1.0.1_bluebird@3.7.2 + promise-inflight: 1.0.1 rimraf: 3.0.2 ssri: 8.0.1 tar: 6.1.11 @@ -11884,6 +11887,7 @@ packages: is-plain-object: 2.0.4 kind-of: 6.0.3 shallow-clone: 3.0.1 + dev: true /clone/1.0.4: resolution: {integrity: sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==} @@ -13987,6 +13991,7 @@ packages: resolution: {integrity: sha512-/o+BXHmB7ocbHEAs6F2EnG0ogybVVUdkRunTT2glZU9XAaGmhqskrvKwqXuDfNjEO0LZKWdejEEpnq8aM0tOaw==} engines: {node: '>=4'} hasBin: true + dev: true /err-code/2.0.3: resolution: {integrity: sha512-2bmlRpNKBxT/CRmPOlyISQpNj+qSeYvcym/uT0Jx2bMOlKLtSy1ZmLuVxSEKKyor/N5yhvp/ZiG1oE3DEYMSFA==} @@ -15829,6 +15834,7 @@ packages: /fastest-levenshtein/1.0.16: resolution: {integrity: sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==} engines: {node: '>= 4.9.1'} + dev: true /fastq/1.13.0: resolution: {integrity: sha512-YpkpUnK8od0o1hmeSc7UUs/eB/vIPWJYjKck2QKIzAf71Vm1AAQ3EbuZB3g2JIy+pg+ERD0vqI79KyZiB2e2Nw==} @@ -16336,7 +16342,7 @@ packages: resolution: {integrity: sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==} engines: {node: '>= 4.0'} os: [darwin] - deprecated: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2. + deprecated: The v1 package contains DANGEROUS / INSECURE binaries. Upgrade to safe fsevents v2 requiresBuild: true dependencies: bindings: 1.5.0 @@ -17476,6 +17482,7 @@ packages: /interpret/2.2.0: resolution: {integrity: sha512-Ju0Bz/cEia55xDwUWEa8+olFpCiQoypjnQySseKtmjNrnps3P+xfpUmGr90T7yjlVJmOtybRvPXhKMbHr+fWnw==} engines: {node: '>= 0.10'} + dev: true /intersperse/1.0.0: resolution: {integrity: sha512-LGcfug7OTeWkaQ8PEq8XbTy9Jl6uCNg8DrPnQUmwxSY8UETj1Y+LLmpdD0qHdEj6KVchuH3BE3ZzIXQ1t3oFUw==} @@ -23022,7 +23029,6 @@ packages: peerDependenciesMeta: bluebird: optional: true - dev: true /promise-inflight/1.0.1_bluebird@3.7.2: resolution: {integrity: sha512-6zWPyEOFaQBJYcGMHBKTKJ3u6TBsnMFOIZSa6ce1e/ZrrsOlnHRHbabMjLiBYKp+n44X9eUI6VUPaukCXHuG4g==} @@ -25088,6 +25094,7 @@ packages: engines: {node: '>= 0.10'} dependencies: resolve: 1.22.1 + dev: true /recursive-readdir/2.2.2: resolution: {integrity: sha512-nRCcW9Sj7NuZwa2XvH9co8NPeXUBhZP7CRKJtU+cS6PW9FpCIFoI5ib0NT1ZrbNuPoRy0ylyCaUL8Gih4LSyFg==} @@ -25648,7 +25655,7 @@ packages: dependencies: klona: 2.0.5 neo-async: 2.6.2 - webpack: 5.74.0_webpack-cli@4.10.0 + webpack: 5.74.0 /sass/1.36.0: resolution: {integrity: sha512-fQzEjipfOv5kh930nu3Imzq3ie/sGDc/4KtQMJlt7RRdrkQSfe37Bwi/Rf/gfuYHsIuE1fIlDMvpyMcEwjnPvg==} @@ -25927,6 +25934,7 @@ packages: engines: {node: '>=8'} dependencies: kind-of: 6.0.3 + dev: true /shallow-equal/1.2.1: resolution: {integrity: sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==} @@ -28662,6 +28670,7 @@ packages: rechoir: 0.7.1 webpack: 5.74.0_webpack-cli@4.10.0 webpack-merge: 5.8.0 + dev: true /webpack-dev-middleware/3.7.3_webpack@4.44.2: resolution: {integrity: sha512-djelc/zGiz9nZj/U7PTBi2ViorGJXEWo/3ltkPbDyxCXhhEXkW0ce99falaok4TPj+AsxLiXJR0EBOb0zh9fKQ==} @@ -28975,6 +28984,7 @@ packages: dependencies: clone-deep: 4.0.1 wildcard: 2.0.0 + dev: true /webpack-sources/1.4.3: resolution: {integrity: sha512-lgTS3Xhv1lCOKo7SA5TjKXMjpSM4sBjNV5+q2bqesbSPs5FjGmU6jjtBSkX9b4qW87vDIsCIlUPOEhbZrMdjeQ==} @@ -29202,6 +29212,7 @@ packages: - '@swc/core' - esbuild - uglify-js + dev: true /websocket-driver/0.7.4: resolution: {integrity: sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==} @@ -29283,6 +29294,7 @@ packages: /wildcard/2.0.0: resolution: {integrity: sha512-JcKqAHLPxcdb9KM49dufGXn2x3ssnfjbcaQdLlfZsL9rH9wgDQjUtDxbo8NE0F6SFvydeu1VhZe7hZuHsB2/pw==} + dev: true /with/7.0.2: resolution: {integrity: sha512-RNGKj82nUPg3g5ygxkQl0R937xLyho1J24ItRCBTr/m1YnZkzJy1hUiHUJrc/VlsDQzsCnInEGSg3bci0Lmd4w==}