qlfy-postmate 1.1.6 → 1.1.8

package/README.md

@@ -14,7 +14,8 @@ import { ChildPostmate } from 'qlfy-postmate'
 
 #### 3、使用
 
-```
+```js
+// 基本使用
 const childrenComm = new ChildPostmate({
   error: (err: any) => {
     console.log('-----------------链接失败-----------------', err)
@@ -26,6 +27,22 @@ const childrenComm = new ChildPostmate({
     console.log('-----------------接收数据-----------------', dataInfo)
   },
 })
+
+// 带路由功能的使用（推荐）
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+const childrenComm = new ChildPostmate({
+  error: (err: any) => {
+    console.log('-----------------链接失败-----------------', err)
+  },
+  success: (success: any) => {
+    console.log('-----------------链接成功-----------------', success)
+  },
+  receive: (dataInfo: any) => {
+    console.log('-----------------接收数据-----------------', dataInfo)
+  },
+}, router) // 传入router实例，支持路由更新功能
 ```
 
 #### 4、参数对象说明
@@ -38,9 +55,11 @@ const childrenComm = new ChildPostmate({
 
 #### 5、方法
 
-| 名称    | 解释                                                         | 使用                      |
-| ------- | ------------------------------------------------------------ | ------------------------- |
-| getData | 链接成功后<br />可通过ChildPostmate实例对象，主动向父页面获取数据 | getData((dataInfo)=>void) |
+| 名称             | 解释                                                         | 使用                                                         |
+| ---------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
+| getData          | 链接成功后<br />可通过ChildPostmate实例对象，主动向父页面获取数据 | getData((dataInfo)=>void)                                    |
+| setRouter        | 设置Vue Router实例和自定义路由更新回调函数<br />用于在实例创建后设置或更新路由实例 | setRouter(router, [routeUpdateCallback])                     |
+| sendOtherRequest | 向父页面发送自定义请求                                       | sendOtherRequest(params)                                     |
 
 #### 注意：
 
@@ -48,7 +67,16 @@ const childrenComm = new ChildPostmate({
 
 2、getData方法，仅能在链接创建完成后再调用
 
-3、error、success函数仅作为链接状态的标注函数，不传递数据
+3、路由更新功能需要传入Vue Router实例才能使用
+
+4、路由更新功能会自动判断URL变化类型：
+   - 如果只有查询参数或哈希变化，只更新参数，不刷新页面
+   - 如果路径变化，会更新整个路由路径，但不会刷新页面
+   - 如果协议、主机或端口变化，会重新加载iframe
+
+5、如果需要自定义路由更新逻辑，可以传入routeUpdateCallback回调函数
+
+6、error、success函数仅作为链接状态的标注函数，不传递数据
 
 
 
@@ -102,6 +130,7 @@ App.vue
 
 <script setup lang="ts">
 import { ref } from 'vue'
+import { useRouter } from 'vue-router'
 import { useSystemStore } from '@/store/modules/system'
 import { ChildPostmate } from 'qlfy-postmate'
 
@@ -117,6 +146,9 @@ initPostMate()
 // 方法 -- 初始化postmate链接
 function initPostMate() {
   loading.value = true
+  // 获取router实例
+  const router = useRouter()
+  
   const childrenComm = new ChildPostmate({
     error: (err: any) => {
       console.log('-----------------链接失败-----------------')
@@ -147,7 +179,7 @@ function initPostMate() {
       // 保存token
       systemStore.setTooken(dataInfo.data.token)
     },
-  })
+  }, router) // 传入router实例，支持路由更新功能
 }
 </script>
 
@@ -157,8 +189,7 @@ function initPostMate() {
 
 ### 样例二（main.js）【推荐】：
 
-```
-
+```js
 import { createApp } from "vue";
 import App from "./App.vue";
 import { ChildPostmate } from 'qlfy-postmate'
@@ -178,7 +209,7 @@ let flag = true
 // pinia模块
 import useCounterStore from "@/store/index.js";
 const $store = useCounterStore();
-// 创建链接
+// 创建链接，传入router实例以支持路由更新功能
 new ChildPostmate({
 	error: (err) => {
 		console.log('-----------------链接失败-----------------')
@@ -191,7 +222,7 @@ new ChildPostmate({
 	},
 
 	// 异步方法
-	receive: async (dataInfo) => {
+	receive: (dataInfo) => {
 		console.log('-----------------接收数据-----------------')
 		console.log(dataInfo)
 		if (dataInfo.status !== 200) return
@@ -209,10 +240,64 @@ new ChildPostmate({
 		}
 		flag = false
 	},
-})
+}, router) // 传入router实例，支持路由更新功能
+```
+
+
+
+### 父页面使用说明（ParentPostmate）
+
+#### 1、导入
+
+```js
+import { ParentPostmate } from 'qlfy-postmate'
 ```
 
+#### 2、基本使用
+
+```js
+// 创建父页面通信实例
+const parentComm = new ParentPostmate(
+  // 传递给子页面的数据
+  {
+    loginInfo: { /* 登录信息 */ },
+    token: 'token字符串',
+    isHideHeader: true
+  },
+  // iframe容器元素
+  document.getElementById('iframe-container'),
+  // 子页面URL
+  'http://example.com/child-page',
+  // 处理子页面其他请求的回调函数
+  (params) => {
+    console.log('收到子页面请求:', params)
+  }
+)
+```
+
+#### 3、路由更新功能
+
+当需要更新子页面URL时，只需调用`setIframeUrl`方法：
+
+```js
+// 更新子页面URL
+parentComm.setIframeUrl('http://example.com/child-page/new-route?param=value')
+```
+
+系统会自动判断URL变化类型：
+- 如果只有查询参数或哈希变化，只更新参数，不刷新页面
+- 如果路径变化，会更新整个路由路径，但不会刷新页面
+- 如果协议、主机或端口变化，会重新加载iframe
+
+#### 4、方法说明
 
+| 方法名 | 说明 | 参数 |
+| ------ | ---- | ---- |
+| setIframeUrl | 设置iframe的URL | (url: string) |
+| setIframeEle | 设置iframe容器元素 | (element: HTMLElement \| (() => HTMLElement)) |
+| sendData | 向子页面发送数据 | () |
+| setLoadFunction | 设置iframe加载完成的回调函数 | (callback: () => void) |
+| destroy | 销毁实例 | () |
 
 ### 集成调试
 

package/lib/index.mjs

@@ -1,9 +1,6 @@
-var f = Object.defineProperty;
-var g = (r, t, e) => t in r ? f(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
-var l = (r, t, e) => g(r, typeof t != "symbol" ? t + "" : t, e);
-const h = "application/x-postmate-v1+json";
-let y = 0;
-const P = {
+const c = "application/x-postmate-v1+json";
+let m = 0;
+const f = {
   handshake: 1,
   "handshake-reply": 1,
   call: 1,
@@ -11,26 +8,26 @@ const P = {
   reply: 1,
   request: 1
 };
-function p(r, t) {
-  return (typeof t != "string" || r.origin === t) && !!r.data && (typeof r.data != "object" || "postmate" in r.data) && r.data.type === h && !!P[r.data.postmate];
+function p(n, t) {
+  return (typeof t != "string" || n.origin === t) && !!n.data && (typeof n.data != "object" || "postmate" in n.data) && n.data.type === c && !!f[n.data.postmate];
 }
-class w {
+class g {
   constructor(t) {
     this.parent = t.parent, this.frame = t.frame, this.child = t.child, this.childOrigin = t.childOrigin, this.events = {}, this.listener = (e) => {
       if (!p(e, this.childOrigin)) return;
-      const { value: s = {} } = e.data, { name: a, data: i } = s;
-      e.data.postmate === "emit" && a in this.events && this.events[a].call(this, i);
+      const { value: s = {} } = e.data, { name: a, data: r } = s;
+      e.data.postmate === "emit" && a in this.events && this.events[a].call(this, r);
     }, this.parent.addEventListener("message", this.listener, !1);
   }
   get(t) {
     return new o.Promise((e) => {
-      const s = ++y, a = (i) => {
-        i.data.uid === s && i.data.postmate === "reply" && (this.parent.removeEventListener("message", a, !1), e(i.data.value));
+      const s = ++m, a = (r) => {
+        r.data.uid === s && r.data.postmate === "reply" && (this.parent.removeEventListener("message", a, !1), e(r.data.value));
       };
       this.parent.addEventListener("message", a, !1), this.child.postMessage(
         {
           postmate: "request",
-          type: h,
+          type: c,
           property: t,
           uid: s
         },
@@ -42,7 +39,7 @@ class w {
     this.child.postMessage(
       {
         postmate: "call",
-        type: h,
+        type: c,
         property: t,
         data: e
       },
@@ -56,33 +53,33 @@ class w {
     window.removeEventListener("message", this.listener, !1), this.frame.parentNode.removeChild(this.frame);
   }
 }
-class E {
+class P {
   constructor(t) {
     this.model = t.model, this.parent = t.parent, this.parentOrigin = t.parentOrigin, this.child = t.child, this.child.addEventListener("message", (e) => {
       if (!p(e, this.parentOrigin)) return;
-      const { postmate: s, property: a, uid: i, data: d } = e.data, n = this.model[a];
+      const { postmate: s, property: a, uid: r, data: h } = e.data, i = this.model[a];
       if (s !== "call") {
-        const c = typeof n == "function" ? n() : n;
-        o.Promise.resolve(c).then((m) => {
+        const l = typeof i == "function" ? i() : i;
+        o.Promise.resolve(l).then((d) => {
           e.source.postMessage(
             {
               property: a,
               postmate: "reply",
-              type: h,
-              uid: i,
-              value: m
+              type: c,
+              uid: r,
+              value: d
             },
             e.origin
           );
         });
-      } else a in this.model && typeof n == "function" && n(d);
+      } else a in this.model && typeof i == "function" && i(h);
     });
   }
   emit(t, e) {
     this.parent.postMessage(
       {
         postmate: "emit",
-        type: h,
+        type: c,
         value: { name: t, data: e }
       },
       this.parentOrigin
@@ -90,40 +87,40 @@ class E {
   }
 }
 class o {
-  constructor({ container: t = document.body, model: e, url: s, name: a, classListArray: i = [] }) {
-    return this.parent = window, this.frame = document.createElement("iframe"), this.frame.name = a || "", this.frame.classList.add(...i), t.appendChild(this.frame), this.child = this.frame.contentWindow, this.model = e || {}, this.sendHandshake(s);
+  constructor({ container: t = document.body, model: e, url: s, name: a, classListArray: r = [] }) {
+    return this.parent = window, this.frame = document.createElement("iframe"), this.frame.name = a || "", this.frame.classList.add(...r), t.appendChild(this.frame), this.child = this.frame.contentWindow, this.model = e || {}, this.sendHandshake(s);
   }
   sendHandshake(t) {
     const e = (() => {
-      const i = document.createElement("a");
-      i.href = t;
-      const d = i.protocol.length > 4 ? i.protocol : window.location.protocol, n = i.host.length ? i.port === "80" || i.port === "443" ? i.hostname : i.host : window.location.host;
-      return i.origin || `${d}//${n}`;
+      const r = document.createElement("a");
+      r.href = t;
+      const h = r.protocol.length > 4 ? r.protocol : window.location.protocol, i = r.host.length ? r.port === "80" || r.port === "443" ? r.hostname : r.host : window.location.host;
+      return r.origin || `${h}//${i}`;
     })();
     let s = 0, a;
-    return new o.Promise((i, d) => {
-      const n = (u) => {
+    return new o.Promise((r, h) => {
+      const i = (u) => {
         if (!p(u, e)) return !1;
-        u.data.postmate === "handshake-reply" ? (clearInterval(a), this.parent.removeEventListener("message", n, !1), this.childOrigin = u.origin, i(new w(this))) : d("Failed handshake");
+        u.data.postmate === "handshake-reply" ? (clearInterval(a), this.parent.removeEventListener("message", i, !1), this.childOrigin = u.origin, r(new g(this))) : h("Failed handshake");
       };
-      this.parent.addEventListener("message", n, !1);
-      const c = () => {
+      this.parent.addEventListener("message", i, !1);
+      const l = () => {
         s++, this.child.postMessage(
           {
             postmate: "handshake",
-            type: h,
+            type: c,
             model: this.model
           },
           e
         ), s === 5 && clearInterval(a);
-      }, m = () => {
-        c(), a = setInterval(c, 500);
+      }, d = () => {
+        l(), a = setInterval(l, 500);
       };
-      this.frame.onload = m, this.frame.attachEvent && this.frame.attachEvent("onload", m), this.frame.src = t;
+      this.frame.onload = d, this.frame.attachEvent && this.frame.attachEvent("onload", d), this.frame.src = t;
     });
   }
 }
-class I {
+class y {
   constructor(t) {
     return this.child = window, this.model = t, this.parent = window.parent, this.sendHandshakeReply();
   }
@@ -135,14 +132,14 @@ class I {
           this.child.removeEventListener("message", this, !1), s.source.postMessage(
             {
               postmate: "handshake-reply",
-              type: h
+              type: c
             },
             s.origin
           ), this.parentOrigin = s.origin;
           const a = s.data.model;
-          a && Object.keys(a).forEach((i) => {
-            this.model[i] = a[i];
-          }), t(new E(this));
+          a && Object.keys(a).forEach((r) => {
+            this.model[r] = a[r];
+          }), t(new P(this));
         }
       }, !1);
     });
@@ -156,10 +153,10 @@ o.Promise = (() => {
     return Promise;
   }
 })();
-o.Model = I;
-class k {
-  constructor(t) {
-    this.childPostmate = null, this.parentPostmate = null, this.isGetData = !1, this.getDataCllBack = null, window.top !== window.self ? this.init(t) : t.error({ status: 500, data: null, message: "未在一体化平台中运行" });
+o.Model = y;
+class w {
+  constructor(t, e, s) {
+    this.childPostmate = null, this.parentPostmate = null, this.isGetData = !1, this.getDataCllBack = null, this.router = null, this.routeUpdateCallback = null, this.router = e, this.routeUpdateCallback = s, window.top !== window.self ? this.init(t) : t.error({ status: 500, data: null, message: "未在一体化平台中运行" });
   }
   init(t) {
     const e = this;
@@ -175,6 +172,19 @@ class k {
           message: "success",
           data: s
         }), e.isGetData = !1;
+      },
+      // 处理路由更新
+      routeUpdate(s) {
+        try {
+          const a = JSON.parse(s);
+          if (e.routeUpdateCallback) {
+            e.routeUpdateCallback(a);
+            return;
+          }
+          e.router ? e.router.replace(a.fullPath) : console.warn("未提供router实例，无法进行路由更新");
+        } catch (a) {
+          console.error("路由更新失败:", a);
+        }
       }
     }).then((s) => {
       e.parentPostmate = s, e.getData(), t.success({
@@ -200,25 +210,63 @@ class k {
     }
     t ? (this.isGetData = !0, this.getDataCllBack = t) : (this.isGetData = !1, this.getDataCllBack = null), this.parentPostmate.emit("requestBaseData");
   }
+  /**
+   * 设置路由实例和路由更新回调
+   * @param router Vue Router实例
+   * @param routeUpdateCallback 自定义路由更新回调函数
+   */
+  setRouter(t, e) {
+    this.router = t, e && (this.routeUpdateCallback = e);
+  }
+  /**
+   * 向父页面发送其他请求
+   * @param params 请求参数
+   */
+  sendOtherRequest(t) {
+    this.parentPostmate && this.parentPostmate.emit("otherRequest", t);
+  }
 }
-class v {
-  constructor(t, e = null, s = "") {
-    /** 连接到的子 postmate 实例 */
-    l(this, "postmateParent", null);
-    /** 通讯数据 */
-    l(this, "dataInfo", {
-      loginInfo: null,
+class U {
+  constructor(t, e, s = "", a) {
+    this.postmateParent = null, this.dataInfo = {
+      loginInfo: {},
       token: "",
       isHideHeader: !0
-    });
-    /** iframe Dom 容器 */
-    l(this, "iframeEle", null);
-    /** 当前 iframe url */
-    l(this, "currentUrl", "");
-    /** 存储当前的 iframe 元素 */
-    l(this, "currentIframe", null);
-    l(this, "loadFunction", null);
-    this.dataInfo = t || this.dataInfo, this.setIframeEle(e), this.setIframeUrl(s);
+    }, this.iframeEle = null, this.currentUrl = "", this.currentIframe = null, this.loadFunction = null, this.handleOtherRequest = null, this.parsedCurrentUrl = null, this.dataInfo = t || this.dataInfo, this.iframeEle = e, this.setIframeUrl(s), a && (this.handleOtherRequest = a);
+  }
+  /** 解析URL */
+  parseUrl(t) {
+    const e = document.createElement("a");
+    e.href = t;
+    const s = e.protocol.length > 4 ? e.protocol : window.location.protocol, a = e.hostname, r = e.port || (s === "https:" ? "443" : s === "http:" ? "80" : ""), h = e.pathname.startsWith("/") ? e.pathname : `/${e.pathname}`, i = e.search, l = e.hash, d = e.origin || `${s}//${a}${r ? `:${r}` : ""}`, u = `${h}${i}${l}`;
+    return {
+      protocol: s,
+      host: a,
+      port: r,
+      pathname: h,
+      search: i,
+      hash: l,
+      origin: d,
+      fullPath: u
+    };
+  }
+  /** 比较两个URL是否相同（协议、主机、端口） */
+  compareUrlBase(t, e) {
+    if (!t || !e) return !1;
+    const s = this.parseUrl(t), a = this.parseUrl(e);
+    return s.protocol === a.protocol && s.host === a.host && s.port === a.port;
+  }
+  /** 比较两个URL的路径是否相同（不包含查询参数和哈希） */
+  compareUrlPath(t, e) {
+    if (!t || !e) return !1;
+    const s = this.parseUrl(t), a = this.parseUrl(e);
+    return s.pathname === a.pathname;
+  }
+  /** 比较两个URL是否完全相同（包括查询参数和哈希） */
+  compareUrlFull(t, e) {
+    if (!t || !e) return !1;
+    const s = this.parseUrl(t), a = this.parseUrl(e);
+    return s.fullPath === a.fullPath;
   }
   /** 清除当前的 iframe 和 postmate 实例 */
   clear() {
@@ -237,13 +285,17 @@ class v {
     }
     const s = new o({
       container: e,
-      url: this.currentUrl
+      url: this.currentUrl,
+      name: "",
+      model: ""
     });
-    this.currentIframe = e.querySelector("iframe"), this.currentIframe.addEventListener("load", () => {
-      this.loadFunction();
+    this.currentIframe = e.querySelector("iframe"), this.currentIframe.setAttribute("frameborder", "0"), this.currentIframe.setAttribute("allow", "fullscreen"), this.currentIframe.addEventListener("load", () => {
+      this.loadFunction && this.loadFunction();
     }), s.then((a) => {
-      console.log("parent", a), this.postmateParent = a, a.on("requestBaseData", (i) => {
+      this.postmateParent = a, a.on("requestBaseData", () => {
         this.sendData();
+      }), a.on("otherRequest", (r) => {
+        this.handleOtherRequest && this.handleOtherRequest(r);
       }), typeof t == "function" && t();
     }).catch((a) => {
       console.error("Postmate 连接失败:", a);
@@ -253,13 +305,37 @@ class v {
   setLoadFunction(t) {
     this.loadFunction = t;
   }
-  /** 设置 iframe Dom */
-  setIframeEle(t) {
-    this.iframeEle !== t && (this.iframeEle = t, this.iframeEle && this.currentUrl && this.init());
-  }
   /** 设置 iframe url */
   setIframeUrl(t) {
-    this.currentUrl !== t && (this.currentUrl = t, this.iframeEle && this.currentUrl && this.init());
+    if (this.currentUrl === t) return;
+    if (!this.currentUrl) {
+      this.currentUrl = t, this.parsedCurrentUrl = this.parseUrl(t), this.iframeEle && this.init();
+      return;
+    }
+    const e = this.parseUrl(t);
+    if (this.postmateParent && this.compareUrlBase(this.currentUrl, t))
+      if (this.compareUrlPath(this.currentUrl, t)) {
+        if (this.compareUrlFull(this.currentUrl, t))
+          return;
+        this.currentUrl = t, this.parsedCurrentUrl = e, this.sendRouteUpdate(e);
+        return;
+      } else {
+        this.currentUrl = t, this.parsedCurrentUrl = e, this.sendRouteUpdate(e);
+        return;
+      }
+    this.currentUrl = t, this.parsedCurrentUrl = e, this.iframeEle && this.init();
+  }
+  /** 向子页面发送路由更新消息 */
+  sendRouteUpdate(t) {
+    this.postmateParent && this.postmateParent.call(
+      "routeUpdate",
+      JSON.stringify({
+        fullPath: t.fullPath,
+        pathname: t.pathname,
+        search: t.search,
+        hash: t.hash
+      })
+    );
   }
   /** 向子页面发送消息 */
   sendData() {
@@ -271,6 +347,6 @@ class v {
   }
 }
 export {
-  k as ChildPostmate,
-  v as ParentPostmate
+  w as ChildPostmate,
+  U as ParentPostmate
 };

package/lib/index.umd.js

@@ -1 +1 @@
-(function(n,r){typeof exports=="object"&&typeof module<"u"?r(exports):typeof define=="function"&&define.amd?define(["exports"],r):(n=typeof globalThis<"u"?globalThis:n||self,r(n["qlfy-postmate"]={}))})(this,function(n){"use strict";var k=Object.defineProperty;var v=(n,r,c)=>r in n?k(n,r,{enumerable:!0,configurable:!0,writable:!0,value:c}):n[r]=c;var d=(n,r,c)=>v(n,typeof r!="symbol"?r+"":r,c);const r="application/x-postmate-v1+json";let c=0;const y={handshake:1,"handshake-reply":1,call:1,emit:1,reply:1,request:1};function p(o,t){return(typeof t!="string"||o.origin===t)&&!!o.data&&(typeof o.data!="object"||"postmate"in o.data)&&o.data.type===r&&!!y[o.data.postmate]}class P{constructor(t){this.parent=t.parent,this.frame=t.frame,this.child=t.child,this.childOrigin=t.childOrigin,this.events={},this.listener=e=>{if(!p(e,this.childOrigin))return;const{value:s={}}=e.data,{name:a,data:i}=s;e.data.postmate==="emit"&&a in this.events&&this.events[a].call(this,i)},this.parent.addEventListener("message",this.listener,!1)}get(t){return new l.Promise(e=>{const s=++c,a=i=>{i.data.uid===s&&i.data.postmate==="reply"&&(this.parent.removeEventListener("message",a,!1),e(i.data.value))};this.parent.addEventListener("message",a,!1),this.child.postMessage({postmate:"request",type:r,property:t,uid:s},this.childOrigin)})}call(t,e){this.child.postMessage({postmate:"call",type:r,property:t,data:e},this.childOrigin)}on(t,e){this.events[t]=e}destroy(){window.removeEventListener("message",this.listener,!1),this.frame.parentNode.removeChild(this.frame)}}class w{constructor(t){this.model=t.model,this.parent=t.parent,this.parentOrigin=t.parentOrigin,this.child=t.child,this.child.addEventListener("message",e=>{if(!p(e,this.parentOrigin))return;const{postmate:s,property:a,uid:i,data:m}=e.data,h=this.model[a];if(s!=="call"){const u=typeof h=="function"?h():h;l.Promise.resolve(u).then(f=>{e.source.postMessage({property:a,postmate:"reply",type:r,uid:i,value:f},e.origin)})}else a in this.model&&typeof h=="function"&&h(m)})}emit(t,e){this.parent.postMessage({postmate:"emit",type:r,value:{name:t,data:e}},this.parentOrigin)}}class l{constructor({container:t=document.body,model:e,url:s,name:a,classListArray:i=[]}){return this.parent=window,this.frame=document.createElement("iframe"),this.frame.name=a||"",this.frame.classList.add(...i),t.appendChild(this.frame),this.child=this.frame.contentWindow,this.model=e||{},this.sendHandshake(s)}sendHandshake(t){const e=(()=>{const i=document.createElement("a");i.href=t;const m=i.protocol.length>4?i.protocol:window.location.protocol,h=i.host.length?i.port==="80"||i.port==="443"?i.hostname:i.host:window.location.host;return i.origin||`${m}//${h}`})();let s=0,a;return new l.Promise((i,m)=>{const h=g=>{if(!p(g,e))return!1;g.data.postmate==="handshake-reply"?(clearInterval(a),this.parent.removeEventListener("message",h,!1),this.childOrigin=g.origin,i(new P(this))):m("Failed handshake")};this.parent.addEventListener("message",h,!1);const u=()=>{s++,this.child.postMessage({postmate:"handshake",type:r,model:this.model},e),s===5&&clearInterval(a)},f=()=>{u(),a=setInterval(u,500)};this.frame.onload=f,this.frame.attachEvent&&this.frame.attachEvent("onload",f),this.frame.src=t})}}class E{constructor(t){return this.child=window,this.model=t,this.parent=window.parent,this.sendHandshakeReply()}sendHandshakeReply(){return new l.Promise((t,e)=>{this.child.addEventListener("message",s=>{if(s.data.postmate){if(s.data.postmate!=="handshake")return e("Handshake Reply Failed");this.child.removeEventListener("message",this,!1),s.source.postMessage({postmate:"handshake-reply",type:r},s.origin),this.parentOrigin=s.origin;const a=s.data.model;a&&Object.keys(a).forEach(i=>{this.model[i]=a[i]}),t(new w(this))}},!1)})}}l.debug=!1,l.Promise=(()=>{try{return typeof window<"u"?window.Promise:Promise}catch{return Promise}})(),l.Model=E;class I{constructor(t){this.childPostmate=null,this.parentPostmate=null,this.isGetData=!1,this.getDataCllBack=null,window.top!==window.self?this.init(t):t.error({status:500,data:null,message:"未在一体化平台中运行"})}init(t){const e=this;this.childPostmate=new l.Model({baseData(s){s=JSON.parse(s),e.isGetData?e.getDataCllBack&&e.getDataCllBack({status:200,message:"success",data:s}):t.receive({status:200,message:"success",data:s}),e.isGetData=!1}}).then(s=>{e.parentPostmate=s,e.getData(),t.success({status:200,message:"success",data:{ChildPostmate:s}})}).catch(s=>{t.error({status:500,data:null,message:s})})}getData(t){if(!this.parentPostmate){t({status:500,message:"父页面未连接",data:null});return}t?(this.isGetData=!0,this.getDataCllBack=t):(this.isGetData=!1,this.getDataCllBack=null),this.parentPostmate.emit("requestBaseData")}}class D{constructor(t,e=null,s=""){d(this,"postmateParent",null);d(this,"dataInfo",{loginInfo:null,token:"",isHideHeader:!0});d(this,"iframeEle",null);d(this,"currentUrl","");d(this,"currentIframe",null);d(this,"loadFunction",null);this.dataInfo=t||this.dataInfo,this.setIframeEle(e),this.setIframeUrl(s)}clear(){this.postmateParent&&(this.postmateParent.destroy(),this.postmateParent=null),this.currentIframe&&this.currentIframe.parentNode&&this.currentIframe.parentNode.removeChild(this.currentIframe),this.currentIframe=null}async init(t=null){if(this.clear(),!this.iframeEle||!this.currentUrl){console.warn("iframeEle 和 currentUrl 是必需的");return}const e=typeof this.iframeEle=="function"?this.iframeEle():this.iframeEle;if(!e){console.warn("无法获取 iframe 容器");return}const s=new l({container:e,url:this.currentUrl});this.currentIframe=e.querySelector("iframe"),this.currentIframe.addEventListener("load",()=>{this.loadFunction()}),s.then(a=>{console.log("parent",a),this.postmateParent=a,a.on("requestBaseData",i=>{this.sendData()}),typeof t=="function"&&t()}).catch(a=>{console.error("Postmate 连接失败:",a)})}setLoadFunction(t){this.loadFunction=t}setIframeEle(t){this.iframeEle!==t&&(this.iframeEle=t,this.iframeEle&&this.currentUrl&&this.init())}setIframeUrl(t){this.currentUrl!==t&&(this.currentUrl=t,this.iframeEle&&this.currentUrl&&this.init())}sendData(){this.postmateParent&&this.postmateParent.call("baseData",JSON.stringify(this.dataInfo))}destroy(){this.clear()}}n.ChildPostmate=I,n.ParentPostmate=D,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})});
+(function(c,n){typeof exports=="object"&&typeof module<"u"?n(exports):typeof define=="function"&&define.amd?define(["exports"],n):(c=typeof globalThis<"u"?globalThis:c||self,n(c["qlfy-postmate"]={}))})(this,function(c){"use strict";const n="application/x-postmate-v1+json";let f=0;const g={handshake:1,"handshake-reply":1,call:1,emit:1,reply:1,request:1};function m(o,t){return(typeof t!="string"||o.origin===t)&&!!o.data&&(typeof o.data!="object"||"postmate"in o.data)&&o.data.type===n&&!!g[o.data.postmate]}class P{constructor(t){this.parent=t.parent,this.frame=t.frame,this.child=t.child,this.childOrigin=t.childOrigin,this.events={},this.listener=e=>{if(!m(e,this.childOrigin))return;const{value:s={}}=e.data,{name:a,data:r}=s;e.data.postmate==="emit"&&a in this.events&&this.events[a].call(this,r)},this.parent.addEventListener("message",this.listener,!1)}get(t){return new h.Promise(e=>{const s=++f,a=r=>{r.data.uid===s&&r.data.postmate==="reply"&&(this.parent.removeEventListener("message",a,!1),e(r.data.value))};this.parent.addEventListener("message",a,!1),this.child.postMessage({postmate:"request",type:n,property:t,uid:s},this.childOrigin)})}call(t,e){this.child.postMessage({postmate:"call",type:n,property:t,data:e},this.childOrigin)}on(t,e){this.events[t]=e}destroy(){window.removeEventListener("message",this.listener,!1),this.frame.parentNode.removeChild(this.frame)}}class y{constructor(t){this.model=t.model,this.parent=t.parent,this.parentOrigin=t.parentOrigin,this.child=t.child,this.child.addEventListener("message",e=>{if(!m(e,this.parentOrigin))return;const{postmate:s,property:a,uid:r,data:l}=e.data,i=this.model[a];if(s!=="call"){const d=typeof i=="function"?i():i;h.Promise.resolve(d).then(u=>{e.source.postMessage({property:a,postmate:"reply",type:n,uid:r,value:u},e.origin)})}else a in this.model&&typeof i=="function"&&i(l)})}emit(t,e){this.parent.postMessage({postmate:"emit",type:n,value:{name:t,data:e}},this.parentOrigin)}}class h{constructor({container:t=document.body,model:e,url:s,name:a,classListArray:r=[]}){return this.parent=window,this.frame=document.createElement("iframe"),this.frame.name=a||"",this.frame.classList.add(...r),t.appendChild(this.frame),this.child=this.frame.contentWindow,this.model=e||{},this.sendHandshake(s)}sendHandshake(t){const e=(()=>{const r=document.createElement("a");r.href=t;const l=r.protocol.length>4?r.protocol:window.location.protocol,i=r.host.length?r.port==="80"||r.port==="443"?r.hostname:r.host:window.location.host;return r.origin||`${l}//${i}`})();let s=0,a;return new h.Promise((r,l)=>{const i=p=>{if(!m(p,e))return!1;p.data.postmate==="handshake-reply"?(clearInterval(a),this.parent.removeEventListener("message",i,!1),this.childOrigin=p.origin,r(new P(this))):l("Failed handshake")};this.parent.addEventListener("message",i,!1);const d=()=>{s++,this.child.postMessage({postmate:"handshake",type:n,model:this.model},e),s===5&&clearInterval(a)},u=()=>{d(),a=setInterval(d,500)};this.frame.onload=u,this.frame.attachEvent&&this.frame.attachEvent("onload",u),this.frame.src=t})}}class w{constructor(t){return this.child=window,this.model=t,this.parent=window.parent,this.sendHandshakeReply()}sendHandshakeReply(){return new h.Promise((t,e)=>{this.child.addEventListener("message",s=>{if(s.data.postmate){if(s.data.postmate!=="handshake")return e("Handshake Reply Failed");this.child.removeEventListener("message",this,!1),s.source.postMessage({postmate:"handshake-reply",type:n},s.origin),this.parentOrigin=s.origin;const a=s.data.model;a&&Object.keys(a).forEach(r=>{this.model[r]=a[r]}),t(new y(this))}},!1)})}}h.debug=!1,h.Promise=(()=>{try{return typeof window<"u"?window.Promise:Promise}catch{return Promise}})(),h.Model=w;class U{constructor(t,e,s){this.childPostmate=null,this.parentPostmate=null,this.isGetData=!1,this.getDataCllBack=null,this.router=null,this.routeUpdateCallback=null,this.router=e,this.routeUpdateCallback=s,window.top!==window.self?this.init(t):t.error({status:500,data:null,message:"未在一体化平台中运行"})}init(t){const e=this;this.childPostmate=new h.Model({baseData(s){s=JSON.parse(s),e.isGetData?e.getDataCllBack&&e.getDataCllBack({status:200,message:"success",data:s}):t.receive({status:200,message:"success",data:s}),e.isGetData=!1},routeUpdate(s){try{const a=JSON.parse(s);if(e.routeUpdateCallback){e.routeUpdateCallback(a);return}e.router?e.router.replace(a.fullPath):console.warn("未提供router实例，无法进行路由更新")}catch(a){console.error("路由更新失败:",a)}}}).then(s=>{e.parentPostmate=s,e.getData(),t.success({status:200,message:"success",data:{ChildPostmate:s}})}).catch(s=>{t.error({status:500,data:null,message:s})})}getData(t){if(!this.parentPostmate){t({status:500,message:"父页面未连接",data:null});return}t?(this.isGetData=!0,this.getDataCllBack=t):(this.isGetData=!1,this.getDataCllBack=null),this.parentPostmate.emit("requestBaseData")}setRouter(t,e){this.router=t,e&&(this.routeUpdateCallback=e)}sendOtherRequest(t){this.parentPostmate&&this.parentPostmate.emit("otherRequest",t)}}class E{constructor(t,e,s="",a){this.postmateParent=null,this.dataInfo={loginInfo:{},token:"",isHideHeader:!0},this.iframeEle=null,this.currentUrl="",this.currentIframe=null,this.loadFunction=null,this.handleOtherRequest=null,this.parsedCurrentUrl=null,this.dataInfo=t||this.dataInfo,this.iframeEle=e,this.setIframeUrl(s),a&&(this.handleOtherRequest=a)}parseUrl(t){const e=document.createElement("a");e.href=t;const s=e.protocol.length>4?e.protocol:window.location.protocol,a=e.hostname,r=e.port||(s==="https:"?"443":s==="http:"?"80":""),l=e.pathname.startsWith("/")?e.pathname:`/${e.pathname}`,i=e.search,d=e.hash,u=e.origin||`${s}//${a}${r?`:${r}`:""}`,p=`${l}${i}${d}`;return{protocol:s,host:a,port:r,pathname:l,search:i,hash:d,origin:u,fullPath:p}}compareUrlBase(t,e){if(!t||!e)return!1;const s=this.parseUrl(t),a=this.parseUrl(e);return s.protocol===a.protocol&&s.host===a.host&&s.port===a.port}compareUrlPath(t,e){if(!t||!e)return!1;const s=this.parseUrl(t),a=this.parseUrl(e);return s.pathname===a.pathname}compareUrlFull(t,e){if(!t||!e)return!1;const s=this.parseUrl(t),a=this.parseUrl(e);return s.fullPath===a.fullPath}clear(){this.postmateParent&&(this.postmateParent.destroy(),this.postmateParent=null),this.currentIframe&&this.currentIframe.parentNode&&this.currentIframe.parentNode.removeChild(this.currentIframe),this.currentIframe=null}async init(t=null){if(this.clear(),!this.iframeEle||!this.currentUrl){console.warn("iframeEle 和 currentUrl 是必需的");return}const e=typeof this.iframeEle=="function"?this.iframeEle():this.iframeEle;if(!e){console.warn("无法获取 iframe 容器");return}const s=new h({container:e,url:this.currentUrl,name:"",model:""});this.currentIframe=e.querySelector("iframe"),this.currentIframe.setAttribute("frameborder","0"),this.currentIframe.setAttribute("allow","fullscreen"),this.currentIframe.addEventListener("load",()=>{this.loadFunction&&this.loadFunction()}),s.then(a=>{this.postmateParent=a,a.on("requestBaseData",()=>{this.sendData()}),a.on("otherRequest",r=>{this.handleOtherRequest&&this.handleOtherRequest(r)}),typeof t=="function"&&t()}).catch(a=>{console.error("Postmate 连接失败:",a)})}setLoadFunction(t){this.loadFunction=t}setIframeUrl(t){if(this.currentUrl===t)return;if(!this.currentUrl){this.currentUrl=t,this.parsedCurrentUrl=this.parseUrl(t),this.iframeEle&&this.init();return}const e=this.parseUrl(t);if(this.postmateParent&&this.compareUrlBase(this.currentUrl,t))if(this.compareUrlPath(this.currentUrl,t)){if(this.compareUrlFull(this.currentUrl,t))return;this.currentUrl=t,this.parsedCurrentUrl=e,this.sendRouteUpdate(e);return}else{this.currentUrl=t,this.parsedCurrentUrl=e,this.sendRouteUpdate(e);return}this.currentUrl=t,this.parsedCurrentUrl=e,this.iframeEle&&this.init()}sendRouteUpdate(t){this.postmateParent&&this.postmateParent.call("routeUpdate",JSON.stringify({fullPath:t.fullPath,pathname:t.pathname,search:t.search,hash:t.hash}))}sendData(){this.postmateParent&&this.postmateParent.call("baseData",JSON.stringify(this.dataInfo))}destroy(){this.clear()}}c.ChildPostmate=U,c.ParentPostmate=E,Object.defineProperty(c,Symbol.toStringTag,{value:"Module"})});

package/lib/postMeta/ChildPostmate.d.ts

@@ -3,13 +3,32 @@ interface EventObj {
     success: (success: any) => void;
     receive: (receive: any) => void;
 }
+interface RouteUpdateInfo {
+    fullPath: string;
+    pathname: string;
+    search: string;
+    hash: string;
+}
 export default class ChildPostmate {
     childPostmate: any;
     parentPostmate: any;
     isGetData: boolean;
     getDataCllBack: Function | null;
-    constructor(eventObj: EventObj);
+    router: any;
+    routeUpdateCallback: ((routeInfo: RouteUpdateInfo) => void) | null;
+    constructor(eventObj: EventObj, router?: any, routeUpdateCallback?: (routeInfo: RouteUpdateInfo) => void);
     init(eventObj: EventObj): void;
     getData(callback?: any): void;
+    /**
+     * 设置路由实例和路由更新回调
+     * @param router Vue Router实例
+     * @param routeUpdateCallback 自定义路由更新回调函数
+     */
+    setRouter(router: any, routeUpdateCallback?: (routeInfo: RouteUpdateInfo) => void): void;
+    /**
+     * 向父页面发送其他请求
+     * @param params 请求参数
+     */
+    sendOtherRequest(params: any): void;
 }
 export {};

package/lib/postMeta/ParentPostmate.d.ts

@@ -0,0 +1,59 @@
+interface DataInfo {
+    loginInfo: {
+        [x: string]: any;
+    };
+    token: string;
+    isHideHeader: boolean;
+}
+interface ParsedUrl {
+    protocol: string;
+    host: string;
+    port: string;
+    pathname: string;
+    search: string;
+    hash: string;
+    origin: string;
+    fullPath: string;
+}
+export default class ParentPostmate {
+    /** 连接到的子 postmate 实例 */
+    postmateParent: any;
+    /** 通讯数据 */
+    dataInfo: DataInfo;
+    /** iframe Dom 容器 */
+    iframeEle: any;
+    /** 当前 iframe url */
+    currentUrl: string;
+    /** 存储当前的 iframe 元素 */
+    currentIframe: any;
+    /** iframe 加载完成执行函数 */
+    loadFunction: (() => void) | null;
+    /** 处理子类的其他请求方法 */
+    handleOtherRequest: ((params: any) => void) | null;
+    /** 当前URL解析结果 */
+    parsedCurrentUrl: ParsedUrl | null;
+    constructor(dataInfo: DataInfo, iframeEle: HTMLElement | (() => HTMLElement), iframeUrl?: string, handleOtherRequest?: (params: any) => void);
+    /** 解析URL */
+    parseUrl(url: string): ParsedUrl;
+    /** 比较两个URL是否相同（协议、主机、端口） */
+    compareUrlBase(url1: string, url2: string): boolean;
+    /** 比较两个URL的路径是否相同（不包含查询参数和哈希） */
+    compareUrlPath(url1: string, url2: string): boolean;
+    /** 比较两个URL是否完全相同（包括查询参数和哈希） */
+    compareUrlFull(url1: string, url2: string): boolean;
+    /** 清除当前的 iframe 和 postmate 实例 */
+    clear(): void;
+    /** 初始化 */
+    init(callback?: any): Promise<void>;
+    /** 设置load执行事件 */
+    setLoadFunction(loadFunction: any): void;
+    /** 设置 iframe url */
+    setIframeUrl(iframeUrl: string): void;
+    /** 向子页面发送路由更新消息 */
+    sendRouteUpdate(parsedUrl: ParsedUrl): void;
+    /** 向子页面发送消息 */
+    sendData(): void;
+    /** 销毁实例 */
+    destroy(): void;
+}
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "qlfy-postmate",
-	"version": "1.1.6",
+	"version": "1.1.8",
 	"description": "",
 	"types": "lib/index.d.ts",
 	"module": "lib/index.umd.js",