Page communication

The main page and sub-pages are imported signal.js

In the main page to open the sub-pages through the open method or iframe

After starting communication sub page loads

Home Page const signal = new Signal (); signal.atob ( 'from a'); signal.onmessage listening information from the sub-pages = function (msg) {} 

Subpages const signal = new Signal (); signal.btoa ( 'from b'); signal.onmessage listening information from the main page = function (msg) {} 

signal.js

class Signal {

    atob(message){
		if(window ){
			if(window._signal){
                window._signal.atob = true;
                window._signal.btoa = false;
                window._signal.data = message;
              
			}else{
				window._signal = {
                    top: window,
                    _data: "",
                    atob: false,
                    btoa: false,
                    atobListener: function(){},
                    btoaListeners: new Map(),
				} 
				
				Object.defineProperty(window._signal, 'data', {
					set: function(d){
                        this._data = d;
                            if(this.atob && this.btoaListeners) {
                                setTimeout(()=>{ 
                                    this.btoaListeners.forEach((fn, key)=>{
                                       fn(d);
                                    });
                                    this.atob = false;
                                    this.btoa = true;
                                },200)
                            }
                            if(this.btoa  && this.atobListener) {
                                setTimeout(()=>{ 
                                    this.atobListener(d);                                  
                                    this.btoa = false;
                                    this.atob = true;
                                },200)
                            }
					},
					get: function(){
						return this._data;
					}
				})
                window._signal.atob = true;
                window._signal.btoa = false;
                window._signal.data = message;
			}
		}
	}

	btoa(message){
		if(window){
            let w;
            if(window.opener){
                w = window.opener;
            }else{
                w = window.parent;
            }
     
			if(w._signal){
                w._signal.btoa = true;
                w._signal.atob = false;
                w._signal.data = message;
			}
		}
    }
    
    set onmessage(fn){
        if(window){
            let w;
            if(window.opener){
                w = window.opener;
            }else{
                w = window.parent;
            }
            if(w && w._signal && w._signal.top != window){	
                const key = window.location.pathname;
                w._signal.btoaListeners.set(key, fn);
            }else{        
                window._signal.atobListener = fn;
            }
        }
    }
}