qlfy-postmate 1.1.5 → 1.1.7

package/README.md

@@ -78,7 +78,9 @@ const childrenComm = new ChildPostmate({
 
    ​		（3）解除对登陆状态判断的屏蔽（因已使用接收的数据配置了登录状态，不会触发本系统的登陆）；
 
-### 样例：
+接入步骤（动态路由）
+
+### 样例一（app.vue）：
 
 App.vue
 
@@ -153,6 +155,65 @@ function initPostMate() {
 
 ```
 
+### 样例二（main.js）【推荐】：
+
+```
+
+import { createApp } from "vue";
+import App from "./App.vue";
+import { ChildPostmate } from 'qlfy-postmate'
+import router from "./router";
+
+import { createPinia } from "pinia";
+const store = createPinia(); //pinia实例
+export const app = createApp(App);
+
+// pinia
+app.use(store);
+// 路由拦截器
+import '@/permission.js'
+
+// 标识，是否为首次加载项目
+let flag = true
+// pinia模块
+import useCounterStore from "@/store/index.js";
+const $store = useCounterStore();
+// 创建链接
+new ChildPostmate({
+	error: (err) => {
+		console.log('-----------------链接失败-----------------')
+		app.use(router)
+		app.mount("#app");
+	},
+
+	success: (success) => {
+		console.log('-----------------链接成功-----------------')
+	},
+
+	// 异步方法
+	receive: (dataInfo) => {
+		console.log('-----------------接收数据-----------------')
+		console.log(dataInfo)
+		if (dataInfo.status !== 200) return
+		
+		// 数据更新 -- 是否隐藏页头
+		$store.setIsHideHeader(dataInfo.data.isHideHeader);
+		// 数据更新 -- 登陆信息
+		$store.setLoginInfo(dataInfo.data.loginInfo);
+		localStorage.setItem('info', JSON.stringify(dataInfo.data.loginInfo));
+		
+		// 项目挂载，仅首次加载项目时执行，后续receive触发不执行
+		if (flag) {
+			app.use(router)
+			app.mount("#app")
+		}
+		flag = false
+	},
+})
+```
+
+
+
 ### 集成调试
 
 按下面链接格式在浏览器中访问，该链接支持前端的本地调试

package/lib/index.mjs

@@ -1,9 +1,9 @@
-var u = Object.defineProperty;
-var g = (r, t, e) => t in r ? u(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
+var p = Object.defineProperty;
+var g = (r, t, e) => t in r ? p(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 w = {
   handshake: 1,
   "handshake-reply": 1,
   call: 1,
@@ -12,9 +12,9 @@ const P = {
   request: 1
 };
 function f(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];
+  return (typeof t != "string" || r.origin === t) && !!r.data && (typeof r.data != "object" || "postmate" in r.data) && r.data.type === h && !!w[r.data.postmate];
 }
-class w {
+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 (!f(e, this.childOrigin)) return;
@@ -62,15 +62,15 @@ class E {
       if (!f(e, this.parentOrigin)) return;
       const { postmate: s, property: i, uid: a, data: d } = e.data, n = this.model[i];
       if (s !== "call") {
-        const m = typeof n == "function" ? n() : n;
-        o.Promise.resolve(m).then((c) => {
+        const c = typeof n == "function" ? n() : n;
+        o.Promise.resolve(c).then((m) => {
           e.source.postMessage(
             {
               property: i,
               postmate: "reply",
               type: h,
               uid: a,
-              value: c
+              value: m
             },
             e.origin
           );
@@ -102,12 +102,12 @@ class o {
     })();
     let s = 0, i;
     return new o.Promise((a, d) => {
-      const n = (p) => {
-        if (!f(p, e)) return !1;
-        p.data.postmate === "handshake-reply" ? (clearInterval(i), this.parent.removeEventListener("message", n, !1), this.childOrigin = p.origin, a(new w(this))) : d("Failed handshake");
+      const n = (u) => {
+        if (!f(u, e)) return !1;
+        u.data.postmate === "handshake-reply" ? (clearInterval(i), this.parent.removeEventListener("message", n, !1), this.childOrigin = u.origin, a(new P(this))) : d("Failed handshake");
       };
       this.parent.addEventListener("message", n, !1);
-      const m = () => {
+      const c = () => {
         s++, this.child.postMessage(
           {
             postmate: "handshake",
@@ -116,14 +116,14 @@ class o {
           },
           e
         ), s === 5 && clearInterval(i);
-      }, c = () => {
-        m(), i = setInterval(m, 500);
+      }, m = () => {
+        c(), i = setInterval(c, 500);
       };
-      this.frame.onload = c, this.frame.attachEvent && this.frame.attachEvent("onload", c), this.frame.src = t;
+      this.frame.onload = m, this.frame.attachEvent && this.frame.attachEvent("onload", m), this.frame.src = t;
     });
   }
 }
-class k {
+class I {
   constructor(t) {
     return this.child = window, this.model = t, this.parent = window.parent, this.sendHandshakeReply();
   }
@@ -156,8 +156,8 @@ o.Promise = (() => {
     return Promise;
   }
 })();
-o.Model = k;
-class C {
+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: "未在一体化平台中运行" });
   }
@@ -201,9 +201,9 @@ class C {
     t ? (this.isGetData = !0, this.getDataCllBack = t) : (this.isGetData = !1, this.getDataCllBack = null), this.parentPostmate.emit("requestBaseData");
   }
 }
-class I {
-  constructor(t, e = "", s = "") {
-    /** 连接到的子postmate实例 */
+class v {
+  constructor(t, e = null, s = "") {
+    /** 连接到的子 postmate 实例 */
     l(this, "postmateParent", null);
     /** 通讯数据 */
     l(this, "dataInfo", {
@@ -211,44 +211,66 @@ class I {
       token: "",
       isHideHeader: !0
     });
-    /** iframe Dom */
-    l(this, "iframeEle", "");
-    /** iframe url */
-    l(this, "iframeUrl", "");
-    /** postmate 实例 */
-    l(this, "handshake", null);
-    this.dataInfo = t || this.dataInfo, this.iframeEle = e, this.iframeUrl = s, this.iframeEle && this.iframeUrl && this.init();
+    /** 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);
+  }
+  /** 清除当前的 iframe 和 postmate 实例 */
+  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 = "") {
-    this.postmateParent && (this.postmateParent.destroy(), this.postmateParent = 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;
-    new o({
+    if (!e) {
+      console.warn("无法获取 iframe 容器");
+      return;
+    }
+    const s = new o({
       container: e,
-      url: this.iframeUrl
-    }).then((i) => {
+      url: this.currentUrl
+    });
+    this.currentIframe = e.querySelector("iframe"), this.currentIframe.setAttribute("frameborder", "0"), this.currentIframe.setAttribute("allow", "fullscreen"), this.currentIframe.addEventListener("load", () => {
+      this.loadFunction();
+    }), s.then((i) => {
       this.postmateParent = i, i.on("requestBaseData", (a) => {
         this.sendData();
-      }), t && t();
+      }), typeof t == "function" && t();
+    }).catch((i) => {
+      console.error("Postmate 连接失败:", i);
     });
   }
-  /** 设置iframe Dom */
+  /** 设置load执行事件 */
+  setLoadFunction(t) {
+    this.loadFunction = t;
+  }
+  /** 设置 iframe Dom */
   setIframeEle(t) {
-    this.iframeEle = t, this.iframeEle && this.iframeUrl && this.init();
+    this.iframeEle !== t && (this.iframeEle = t, this.iframeEle && this.currentUrl && this.init());
   }
-  /** 设置iframe url */
+  /** 设置 iframe url */
   setIframeUrl(t) {
-    this.iframeUrl = t, this.iframeEle && this.iframeUrl && this.init();
+    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.postmateParent && (this.postmateParent.destroy(), this.postmateParent = null);
+    this.clear();
   }
 }
 export {
-  C as ChildPostmate,
-  I as ParentPostmate
+  k as ChildPostmate,
+  v as ParentPostmate
 };

package/lib/index.umd.js

@@ -1 +1 @@
-(function(r,n){typeof exports=="object"&&typeof module<"u"?n(exports):typeof define=="function"&&define.amd?define(["exports"],n):(r=typeof globalThis<"u"?globalThis:r||self,n(r["qlfy-postmate"]={}))})(this,function(r){"use strict";var C=Object.defineProperty;var M=(r,n,d)=>n in r?C(r,n,{enumerable:!0,configurable:!0,writable:!0,value:d}):r[n]=d;var m=(r,n,d)=>M(r,typeof n!="symbol"?n+"":n,d);const n="application/x-postmate-v1+json";let d=0;const y={handshake:1,"handshake-reply":1,call:1,emit:1,reply:1,request:1};function u(o,t){return(typeof t!="string"||o.origin===t)&&!!o.data&&(typeof o.data!="object"||"postmate"in o.data)&&o.data.type===n&&!!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(!u(e,this.childOrigin))return;const{value:s={}}=e.data,{name:i,data:a}=s;e.data.postmate==="emit"&&i in this.events&&this.events[i].call(this,a)},this.parent.addEventListener("message",this.listener,!1)}get(t){return new l.Promise(e=>{const s=++d,i=a=>{a.data.uid===s&&a.data.postmate==="reply"&&(this.parent.removeEventListener("message",i,!1),e(a.data.value))};this.parent.addEventListener("message",i,!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 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(!u(e,this.parentOrigin))return;const{postmate:s,property:i,uid:a,data:c}=e.data,h=this.model[i];if(s!=="call"){const p=typeof h=="function"?h():h;l.Promise.resolve(p).then(f=>{e.source.postMessage({property:i,postmate:"reply",type:n,uid:a,value:f},e.origin)})}else i in this.model&&typeof h=="function"&&h(c)})}emit(t,e){this.parent.postMessage({postmate:"emit",type:n,value:{name:t,data:e}},this.parentOrigin)}}class l{constructor({container:t=document.body,model:e,url:s,name:i,classListArray:a=[]}){return this.parent=window,this.frame=document.createElement("iframe"),this.frame.name=i||"",this.frame.classList.add(...a),t.appendChild(this.frame),this.child=this.frame.contentWindow,this.model=e||{},this.sendHandshake(s)}sendHandshake(t){const e=(()=>{const a=document.createElement("a");a.href=t;const c=a.protocol.length>4?a.protocol:window.location.protocol,h=a.host.length?a.port==="80"||a.port==="443"?a.hostname:a.host:window.location.host;return a.origin||`${c}//${h}`})();let s=0,i;return new l.Promise((a,c)=>{const h=g=>{if(!u(g,e))return!1;g.data.postmate==="handshake-reply"?(clearInterval(i),this.parent.removeEventListener("message",h,!1),this.childOrigin=g.origin,a(new P(this))):c("Failed handshake")};this.parent.addEventListener("message",h,!1);const p=()=>{s++,this.child.postMessage({postmate:"handshake",type:n,model:this.model},e),s===5&&clearInterval(i)},f=()=>{p(),i=setInterval(p,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:n},s.origin),this.parentOrigin=s.origin;const i=s.data.model;i&&Object.keys(i).forEach(a=>{this.model[a]=i[a]}),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 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:"未在一体化平台中运行"})}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="",s=""){m(this,"postmateParent",null);m(this,"dataInfo",{loginInfo:null,token:"",isHideHeader:!0});m(this,"iframeEle","");m(this,"iframeUrl","");m(this,"handshake",null);this.dataInfo=t||this.dataInfo,this.iframeEle=e,this.iframeUrl=s,this.iframeEle&&this.iframeUrl&&this.init()}async init(t=""){this.postmateParent&&(this.postmateParent.destroy(),this.postmateParent=null);const e=typeof this.iframeEle=="function"?this.iframeEle():this.iframeEle;new l({container:e,url:this.iframeUrl}).then(i=>{this.postmateParent=i,i.on("requestBaseData",a=>{this.sendData()}),t&&t()})}setIframeEle(t){this.iframeEle=t,this.iframeEle&&this.iframeUrl&&this.init()}setIframeUrl(t){this.iframeUrl=t,this.iframeEle&&this.iframeUrl&&this.init()}sendData(){this.postmateParent&&this.postmateParent.call("baseData",JSON.stringify(this.dataInfo))}destroy(){this.postmateParent&&(this.postmateParent.destroy(),this.postmateParent=null)}}r.ChildPostmate=k,r.ParentPostmate=D,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})});
+(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:i,data:a}=s;e.data.postmate==="emit"&&i in this.events&&this.events[i].call(this,a)},this.parent.addEventListener("message",this.listener,!1)}get(t){return new l.Promise(e=>{const s=++c,i=a=>{a.data.uid===s&&a.data.postmate==="reply"&&(this.parent.removeEventListener("message",i,!1),e(a.data.value))};this.parent.addEventListener("message",i,!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:i,uid:a,data:m}=e.data,h=this.model[i];if(s!=="call"){const u=typeof h=="function"?h():h;l.Promise.resolve(u).then(f=>{e.source.postMessage({property:i,postmate:"reply",type:r,uid:a,value:f},e.origin)})}else i 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:i,classListArray:a=[]}){return this.parent=window,this.frame=document.createElement("iframe"),this.frame.name=i||"",this.frame.classList.add(...a),t.appendChild(this.frame),this.child=this.frame.contentWindow,this.model=e||{},this.sendHandshake(s)}sendHandshake(t){const e=(()=>{const a=document.createElement("a");a.href=t;const m=a.protocol.length>4?a.protocol:window.location.protocol,h=a.host.length?a.port==="80"||a.port==="443"?a.hostname:a.host:window.location.host;return a.origin||`${m}//${h}`})();let s=0,i;return new l.Promise((a,m)=>{const h=g=>{if(!p(g,e))return!1;g.data.postmate==="handshake-reply"?(clearInterval(i),this.parent.removeEventListener("message",h,!1),this.childOrigin=g.origin,a(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(i)},f=()=>{u(),i=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 i=s.data.model;i&&Object.keys(i).forEach(a=>{this.model[a]=i[a]}),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.setAttribute("frameborder","0"),this.currentIframe.setAttribute("allow","fullscreen"),this.currentIframe.addEventListener("load",()=>{this.loadFunction()}),s.then(i=>{this.postmateParent=i,i.on("requestBaseData",a=>{this.sendData()}),typeof t=="function"&&t()}).catch(i=>{console.error("Postmate 连接失败:",i)})}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"})});

package/package.json

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