fix: 修复子应用循环嵌套iframe出现window 指向错误

examples/main-react/src/pages/React17.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import hostMap from "../hostMap";
 import WujieReact from "wujie-react";
 import { useNavigate, useLocation } from "react-router-dom";
@@ -7,23 +7,24 @@ export default function React17() {
   const location = useLocation();
   const navigation = useNavigate();
   const react17Url = hostMap("//localhost:7100/");
-  const path = location.pathname.replace("/react17-sub", "").replace("/react17", "");////
+  const path = location.pathname.replace("/react17-sub", "").replace("/react17", ""); ////
   // 告诉子应用要跳转哪个路由
   path && WujieReact.bus.$emit("react17-router-change", path);
   const props = {
     jump: (name) => {
       navigation(`/${name}`);
     },
   };
+
+  useEffect(() => {
+    window.addEventListener("message", (e) => {
+      if (e.data && e.data.type && e.data.type === "react17") {
+        alert(e.data.msg);
+      }
+    });
+  }, []);
   return (
     // 保活模式，name相同则复用一个子应用实例，改变url无效，必须采用通信的方式告知路由变化
-    <WujieReact
-      width="100%"
-      height="100%"
-      name="react17"
-      url={react17Url}
-      sync={!path}
-      props={props}
-    ></WujieReact>
+    <WujieReact width="100%" height="100%" name="react17" url={react17Url} sync={!path} props={props}></WujieReact>
   );
 }

examples/react16/src/App.js

@@ -5,6 +5,7 @@ import Location from "./Location";
 import Communication from "./Communication";
 import React17 from "./nest";
 import Font from "./Font";
+import Iframe from "./Iframe";
 import logo from "./logo.svg";
 import Tag from "antd/es/tag";
 import Button from "antd/es/button";
@@ -39,10 +40,10 @@ const Home = () => (
 
 export default function App() {
   // 在 react16-sub 路由下主动告知主应用路由跳转，主应用也跳到相应路由高亮菜单栏
-  const location = useLocation()
+  const location = useLocation();
   useEffect(() => {
-    window.$wujie?.bus.$emit('sub-route-change', "react16", location.pathname)
-  }, [location])
+    window.$wujie?.bus.$emit("sub-route-change", "react16", location.pathname);
+  }, [location]);
 
   return (
     <div>
@@ -75,6 +76,11 @@ export default function App() {
         <Route path="/font">
           <Font />
         </Route>
+
+        <Route path="/iframe">
+          <Iframe />
+        </Route>
+
         <Route exact path="/">
           <Redirect to="/home" />
         </Route>

examples/react16/src/Communication.js

@@ -15,6 +15,17 @@ export default class Communication extends React.Component {
   handleEmit = () => {
     window.$wujie && window.$wujie.bus.$emit("click", "react16");
   };
+
+  sendPostMessage = () => {
+    window.parent.postMessage(
+      {
+        type: "react16",
+        msg: "react16  向父级窗口发送消息L: " + new Date().getTime(),
+      },
+      "*"
+    );
+  };
+
   render() {
     return (
       <div>
@@ -37,6 +48,11 @@ export default class Communication extends React.Component {
           <p>
             <Button onClick={this.handleEmit}>显示alert</Button>
           </p>
+
+          <h3>3、向上一级父页面发送消息: 父页面可能是 子应用调用，也可能父应用 </h3>
+          <p>
+            <Button onClick={this.sendPostMessage}>react 16 发送消息给上一级应用</Button>
+          </p>
         </div>
       </div>
     );

examples/react16/src/Iframe.js

@@ -0,0 +1,23 @@
+import * as React from "react";
+import Button from "antd/es/button";
+
+export default function Iframe() {
+  const sendPostMessage = () => {
+    window.parent.postMessage(
+      {
+        type: "react16",
+        msg: "react16  向父级窗口发送消息L: " + new Date().getTime(),
+      },
+      "*"
+    );
+  };
+
+  return (
+    <div>
+      Iframe测试
+      <p>
+        <Button onClick={sendPostMessage}>react 16 发送消息给上一级应用</Button>
+      </p>
+    </div>
+  );
+}

examples/react17/src/Communication.js

@@ -2,6 +2,8 @@ import React from "react";
 import Button from "antd/es/button";
 
 export default class Communication extends React.Component {
+  state = { childrenMessage: "" };
+
   jump = () => {
     window.$wujie && window.$wujie.props.jump("vue3");
   };
@@ -15,27 +17,37 @@ export default class Communication extends React.Component {
   };
 
   printfMessage = (e) => {
-    console.log('父级发过来的消息：',e.data)
-    alert('父级发过来的消息：' + e.data)
-  }
+    console.log("父级发过来的消息：", e.data);
+    if (e.data.type === "react16") {
+      this.setState({ childrenMessage: e.data.msg });
+    }
+  };
 
   sendPostMessage = () => {
     // 向父级窗口发送消息
-    window.parent.postMessage('Hello 父应用，我是子应用!', '*');
+    window.parent.postMessage(
+      {
+        type: "react17",
+        msg: "react17  向父级窗口发送消息L: " + new Date().getTime(),
+      },
+      "*"
+    );
   };
 
   componentDidMount() {
-    window.addEventListener("message", (e)=>this.printfMessage(e), { targetWindow: window.__WUJIE_RAW_WINDOW__ });
+    // window.addEventListener("message", (e) => this.printfMessage(e), { targetWindow: window.__WUJIE_RAW_WINDOW__ });
+    window.addEventListener("message", (e) => this.printfMessage(e));
   }
 
   componentWillUnmount() {
-    window.removeEventListener("message", (e)=>this.printfMessage(e), { targetWindow: window.__WUJIE_RAW_WINDOW__ });
+    // window.removeEventListener("message", (e) => this.printfMessage(e), { targetWindow: window.__WUJIE_RAW_WINDOW__ });
+    window.addEventListener("message", (e) => this.printfMessage(e));
   }
 
   render() {
     return (
       <div>
-        <h2>通信处理</h2>
+        <h2>通信处理--</h2>
         <div className="content">
           <p>应用可以有三种方式进行通信</p>
           <h3>1、主应用通过 props 属性注入的方法</h3>
@@ -64,6 +76,10 @@ export default class Communication extends React.Component {
             <Button onClick={this.sendPostMessage}>postMessage发送消息</Button>
           </p>
         </div>
+
+        {this.state.childrenMessage && <p>接收到iframe消息: {this.state.childrenMessage}</p>}
+
+        <iframe src="http://localhost:7600/iframe" title="react16" width="100%" height="500px"></iframe>
       </div>
     );
   }

packages/wujie-core/src/iframe.ts

@@ -123,8 +123,14 @@ function patchIframeEvents(iframeWindow: Window) {
     execHooks(iframeWindow.__WUJIE.plugins, "windowAddEventListenerHook", iframeWindow, type, listener, options);
     // 相同参数多次调用 addEventListener 不会导致重复注册，所以用set。
     iframeWindow.__WUJIE_EVENTLISTENER__.add({ type, listener, options });
-    if (appWindowAddEventListenerEvents.includes(type) || (typeof options === "object" && options.targetWindow)) {
-      const targetWindow = typeof options === "object" && options.targetWindow ? options?.targetWindow : iframeWindow;
+    const isConfigTargetWindow = typeof options === "object" && options.targetWindow;
+
+    // 处理子应用循环嵌套iframe场景的 window 指向问题
+    if (appWindowAddEventListenerEvents.includes(type) || isConfigTargetWindow) {
+      const targetWindow =
+        typeof options === "object" && options.targetWindow
+          ? options?.targetWindow
+          : window.__WUJIE_RAW_WINDOW__ || window;
       return rawWindowAddEventListener.call(targetWindow, type, listener, options);
     }
     // 在子应用嵌套场景使用window.window获取真实window
@@ -144,8 +150,9 @@ function patchIframeEvents(iframeWindow: Window) {
         iframeWindow.__WUJIE_EVENTLISTENER__.delete(o);
       }
     });
-    if (appWindowAddEventListenerEvents.includes(type) || (typeof options === "object" && options.targetWindow)) {
-      const targetWindow = typeof options === "object" && options.targetWindow ? options?.targetWindow : iframeWindow;
+    const isConfigTargetWindow = typeof options === "object" && options.targetWindow;
+    if (appWindowAddEventListenerEvents.includes(type) || isConfigTargetWindow) {
+      const targetWindow = isConfigTargetWindow ? options?.targetWindow : window.__WUJIE_RAW_WINDOW__ || window;
       return rawWindowRemoveEventListener.call(targetWindow, type, listener, options);
     }
     rawWindowRemoveEventListener.call(window.__WUJIE_RAW_WINDOW__ || window, type, listener, options);