inframejs - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

dist/inframejs.es.min.js

 /*! 
    name: iframeBridge
-   version: 1.0.0
+   version: 1.0.1
    file: inframejs.min.js
    author: web.szy
-   buildTime: 2022/2/15 上午11:28:46
+   buildTime: 2022/2/15 下午4:31:46
  */
 const Inframe = class {
-  constructor({ target, whiteList, libName }) {
+  constructor({ target, whiteList, libName, debug } = {}) {
     this.setTargetIframe(target);
@@ -16,3 +16,4 @@ this.setLibName(libName);
     }
-    this.whiteList = whiteList;
+    this.whiteList = whiteList || [];
+    this.debug = !!debug;
     this.handlersMap = /* @__PURE__ */ new Map();
@@ -24,10 +25,9 @@ if (!window) {
     window.getInframeInstace = () => this;
-    window.addEventListener("message", this.handleEvent);
-    setTimeout(() => {
-      if (this.targetIframe) {
-        this.emit("connected", "send by mainPage");
-      } else {
-        this.emit("connected", "send by iframe page");
-      }
-    }, 1e3);
+    window.addEventListener("message", this.handleEvent.bind(this));
+    if (this.targetIframe) {
+      this.on("connected", (e) => console.log(e));
+    } else {
+      console.log("sub instance", this);
+      this.emit("connected", "sub Page connected");
+    }
     return this;
@@ -38,7 +38,9 @@ }
       this.targetIframe = document.querySelector(target);
+      this.pageName = "main";
     } else if (typeof target !== "undefined") {
       this.targetIframe = target;
-      this.emit("connected", "send by mainPage");
+      this.pageName = "main";
     } else {
       this.targetIframe = null;
+      this.pageName = "sub";
     }
@@ -50,2 +52,3 @@ }
   on(eventName, handler) {
+    this.logger(`${eventName} has been watched`);
     if (this.handlersMap.has(eventName)) {
@@ -65,8 +68,12 @@ const handlers = this.handlersMap.get(eventName);
   emit(eventName, data) {
+    const msg = {
+      event: eventName,
+      params: data,
+      lib: this.libName
+    };
+    this.logger(`${eventName} has been emitted::${JSON.stringify(msg)}`);
     if (this.targetIframe) {
-      this.targetIframe.postMessage({
-        event: eventName,
-        params: data,
-        lib: this.libName
-      });
+      this.targetIframe.contentWindow.postMessage(msg, "*");
+    } else {
+      window.parent.postMessage(msg, "*");
     }
@@ -86,6 +93,8 @@ }
     const { data } = e;
-    console.log("handleEvent", e);
+    this.logger(`received data: ${JSON.stringify(data)}`);
     if (this.handlersMap.has(data.event)) {
       const handlers = this.handlersMap.get(data.event);
       handlers.forEach((handler) => handler(data));
+    } else {
+      this.logger(`handlers not find: ${JSON.stringify(data)}`);
     }
@@ -98,7 +107,11 @@ }
   }
+  logger(message) {
+    if (!this.debug) {
+      return;
+    }
+    const d = new Date();
+    const time = `${d.getHours()}:${d.getMinutes()}:${d.getSeconds()}`;
+    console.log(`${time}-${this.pageName}::${message}`);
+  }
 };
-const bridge = new Inframe({
-  target: "#iframe"
-});
-bridge.on("msg", (e) => console.log(e));
 export { Inframe as default };

dist/inframejs.umd.min.js

 /*! 
    name: iframeBridge
-   version: 1.0.0
+   version: 1.0.1
    file: inframejs.min.js
    author: web.szy
-   buildTime: 2022/2/15 上午11:28:46
+   buildTime: 2022/2/15 下午4:31:46
  */
-(function(s,i){typeof exports=="object"&&typeof module!="undefined"?module.exports=i():typeof define=="function"&&define.amd?define(i):(s=typeof globalThis!="undefined"?globalThis:s||self,s.inframejs=i())})(this,function(){"use strict";const s=class{constructor({target:e,whiteList:t,libName:n}){return this.setTargetIframe(e),this.setLibName(n),typeof t!="undefined"&&!Array.isArray(t)?(console.warn("whiteList must be a Array"),!1):(this.whiteList=t,this.handlersMap=new Map,window?(window.getInframeInstace=()=>this,window.addEventListener("message",this.handleEvent),setTimeout(()=>{this.targetIframe?this.emit("connected","send by mainPage"):this.emit("connected","send by iframe page")},1e3),this):(console.warn("inframe bridge must init on the browser"),!1))}setTargetIframe(e){typeof e=="string"?this.targetIframe=document.querySelector(e):typeof e!="undefined"?(this.targetIframe=e,this.emit("connected","send by mainPage")):this.targetIframe=null}setLibName(e){this.libName=e||"inframe"}on(e,t){if(this.handlersMap.has(e)){const n=this.handlersMap.get(e);n.push(t),this.handlersMap.set(e,n)}else this.handlersMap.set(e,[t])}off(e){this.handlersMap.has(e)&&this.handlersMap.delete(e)}emit(e,t){this.targetIframe&&this.targetIframe.postMessage({event:e,params:t,lib:this.libName})}handleEvent(e){if(!e||typeof e.data!="object"||!(e.data.lib&&e.data.lib===this.libName))return;if(this.whiteList.length&&!this.whiteList.some(a=>~a.indexOf(e.origin))){console.warn("you are not access to inframe");return}const{data:t}=e;console.log("handleEvent",e),this.handlersMap.has(t.event)&&this.handlersMap.get(t.event).forEach(a=>a(t))}destroy(){this.handlersMap.clear(),window.getInframeInstace=null,window.removeEventListener("message",this.handleEvent)}};return new s({target:"#iframe"}).on("msg",e=>console.log(e)),s});
+(function(n,e){typeof exports=="object"&&typeof module!="undefined"?module.exports=e():typeof define=="function"&&define.amd?define(e):(n=typeof globalThis!="undefined"?globalThis:n||self,n.inframejs=e())})(this,function(){"use strict";return class{constructor({target:e,whiteList:t,libName:s,debug:i}={}){return this.setTargetIframe(e),this.setLibName(s),typeof t!="undefined"&&!Array.isArray(t)?(console.warn("whiteList must be a Array"),!1):(this.whiteList=t||[],this.debug=!!i,this.handlersMap=new Map,window?(window.getInframeInstace=()=>this,window.addEventListener("message",this.handleEvent.bind(this)),this.targetIframe?this.on("connected",a=>console.log(a)):(console.log("sub instance",this),this.emit("connected","sub Page connected")),this):(console.warn("inframe bridge must init on the browser"),!1))}setTargetIframe(e){typeof e=="string"?(this.targetIframe=document.querySelector(e),this.pageName="main"):typeof e!="undefined"?(this.targetIframe=e,this.pageName="main"):(this.targetIframe=null,this.pageName="sub")}setLibName(e){this.libName=e||"inframe"}on(e,t){if(this.logger(`${e} has been watched`),this.handlersMap.has(e)){const s=this.handlersMap.get(e);s.push(t),this.handlersMap.set(e,s)}else this.handlersMap.set(e,[t])}off(e){this.handlersMap.has(e)&&this.handlersMap.delete(e)}emit(e,t){const s={event:e,params:t,lib:this.libName};this.logger(`${e} has been emitted::${JSON.stringify(s)}`),this.targetIframe?this.targetIframe.contentWindow.postMessage(s,"*"):window.parent.postMessage(s,"*")}handleEvent(e){if(!e||typeof e.data!="object"||!(e.data.lib&&e.data.lib===this.libName))return;if(this.whiteList.length&&!this.whiteList.some(i=>~i.indexOf(e.origin))){console.warn("you are not access to inframe");return}const{data:t}=e;this.logger(`received data: ${JSON.stringify(t)}`),this.handlersMap.has(t.event)?this.handlersMap.get(t.event).forEach(i=>i(t)):this.logger(`handlers not find: ${JSON.stringify(t)}`)}destroy(){this.handlersMap.clear(),window.getInframeInstace=null,window.removeEventListener("message",this.handleEvent)}logger(e){if(!this.debug)return;const t=new Date,s=`${t.getHours()}:${t.getMinutes()}:${t.getSeconds()}`;console.log(`${s}-${this.pageName}::${e}`)}}});

package.json

 {
   "name": "inframejs",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "use pure Javascript to connect the iframe pages",
@@ -5,0 +5,0 @@ "main": "dist/inframejs.es.min.js",

README.md

@@ -1,2 +0,2 @@
-# inframe-bridge
+# inframeJS
 use pure Javascript to connect the iframe pages

src/index.js

@@ -1,71 +0,84 @@
-const Inframe = class  {
-    constructor({target,whiteList,libName}){
+const Inframe = class {
+    constructor({target, whiteList, libName,debug} = {}) {
         this.setTargetIframe(target)
         this.setLibName(libName)
-        if(typeof whiteList !== 'undefined' && !Array.isArray(whiteList)){
+        if (typeof whiteList !== 'undefined' && !Array.isArray(whiteList)) {
             console.warn('whiteList must be a Array')
             return false
         }
-        this.whiteList = whiteList
+        this.whiteList = whiteList || []
+        this.debug = !!debug
         this.handlersMap = new Map()
-        if(!window){
+        if (!window) {
             console.warn(`inframe bridge must init on the browser`)
             return false
         }
-        window.getInframeInstace = ()=>this
-        window.addEventListener('message',this.handleEvent)
-        setTimeout(()=>{
-            if(this.targetIframe){
-                this.emit('connected','send by mainPage')
-            } else {
-                this.emit('connected','send by iframe page')
-            }
-        },1000)
+        window.getInframeInstace = () => this
+        window.addEventListener('message', this.handleEvent.bind(this))
+        if (this.targetIframe) {
+            this.on('connected', (e) => console.log(e))
+        } else {
+            console.log('sub instance',this)
+            this.emit('connected','sub Page connected')
+        }
         return this
     }
-    setTargetIframe(target){
-        if(typeof target === 'string'){
+
+    setTargetIframe(target) {
+        if (typeof target === 'string') {
             this.targetIframe = document.querySelector(target);
-        } else if(typeof target!=='undefined'){
+            this.pageName='main'
+        } else if (typeof target !== 'undefined') {
             this.targetIframe = target
-            this.emit('connected','send by mainPage')
+            this.pageName='main'
         } else {
             this.targetIframe = null
+            this.pageName='sub'
         }
     }
-    setLibName(name){
-        this.libName=name || 'inframe'
+
+    setLibName(name) {
+        this.libName = name || 'inframe'
     }
-    on(eventName,handler){
-        if(this.handlersMap.has(eventName)){
+
+    on(eventName, handler) {
+        this.logger(`${eventName} has been watched`)
+        if (this.handlersMap.has(eventName)) {
             const handlers = this.handlersMap.get(eventName)
             handlers.push(handler)
-            this.handlersMap.set(eventName,handlers)
+            this.handlersMap.set(eventName, handlers)
         } else {
-            this.handlersMap.set(eventName,[handler])
+            this.handlersMap.set(eventName, [handler])
         }
     }
-    off(eventName){
-        if(this.handlersMap.has(eventName)){
+
+    off(eventName) {
+        if (this.handlersMap.has(eventName)) {
             this.handlersMap.delete(eventName)
         }
     }
-    emit(eventName,data){
-        if(this.targetIframe){
-            this.targetIframe.postMessage({
-                event:eventName,
-                params:data,
-                lib:this.libName
-            })
+
+    emit(eventName, data) {
+        const msg = {
+            event: eventName,
+            params: data,
+            lib: this.libName
         }
+        this.logger(`${eventName} has been emitted::${JSON.stringify(msg)}`)
+        if (this.targetIframe) {
+            this.targetIframe.contentWindow.postMessage(msg, '*')
+        } else {
+            window.parent.postMessage(msg, '*')
+        }
     }
-    handleEvent(e){
+
+    handleEvent(e) {
         // 验证data是由inframe发出的
-        if(!e || typeof e.data!=='object' || !(e.data.lib&&e.data.lib === this.libName)){
+        if (!e || typeof e.data !== 'object' || !(e.data.lib && e.data.lib === this.libName)) {
             return
         }
         // 验证域名
-        if(this.whiteList.length){
-            const checked = this.whiteList.some(domain=>~domain.indexOf(e.origin))
-            if(!checked){
+        if (this.whiteList.length) {
+            const checked = this.whiteList.some(domain => ~domain.indexOf(e.origin))
+            if (!checked) {
                 console.warn('you are not access to inframe')
@@ -76,19 +89,26 @@ return
         const {data} = e
-        console.log('handleEvent',e)
-        if(this.handlersMap.has(data.event)){
+        this.logger(`received data: ${JSON.stringify(data)}`)
+        if (this.handlersMap.has(data.event)) {
             const handlers = this.handlersMap.get(data.event)
-            handlers.forEach(handler=>handler(data))
+            handlers.forEach(handler => handler(data))
+        } else{
+            this.logger(`handlers not find: ${JSON.stringify(data)}`)
         }
 
     }
-    destroy(){
+
+    destroy() {
         this.handlersMap.clear()
         window.getInframeInstace = null
-        window.removeEventListener('message',this.handleEvent)
+        window.removeEventListener('message', this.handleEvent)
     }
+    logger(message){
+        if(!this.debug){
+            return
+        }
+        const d = new Date()
+        const time = `${d.getHours()}:${d.getMinutes()}:${d.getSeconds()}`
+        console.log(`${time}-${this.pageName}::${message}`)
+    }
 }
-const bridge = new Inframe({
-    target:'#iframe'
-})
-bridge.on('msg',e=>console.log(e))
 export default Inframe

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

11836

increased by18.02%

Number of package files

9

increased by12.5%

Lines of code

276

increased by14.05%

No dependency changes