关于浏览器跨页面通信

浏览器跨页面通信现在大概有2种方法1.Broadcast Channel同源访问更加安全必须放在http服务器上才可通讯。主页面index.htmldivbutton onclickpostMessage(1)按钮1/buttonbutton onclickpostMessage(2)按钮2/buttonbutton onclickpostMessage(3)按钮3/buttonspan stylecolor:#000000;idtime等待刷新/span/divdiviframe stylewidth:600px;height:600px;src./frame.htmlframeborder0/iframe/divconstbroadcastnewBroadcastChannel(Broadcast);//订阅消息broadcast.onmessage(msg){console.log(主页面 onmessage:,msg.data);document.getElementById(time).innerHTMLmsg.data;}constpostMessage(msg){console.log(主页面 postMessage:,msg);broadcast.postMessage(msg)}内嵌页面 iframe.htmldiv idcontentstylewidth:500px;height:300px;background-color: pink;等待主页面广播button onclickrefreshTime()刷新主页面时间/button/divconstbroadcastnewBroadcastChannel(Broadcast);//订阅消息broadcast.onmessage(msg){console.log(内嵌页面 onmessage:,msg.data);document.getElementById(content).innerHTML/brmsg.data;}constpostMessage(msg){console.log(内嵌页面 postMessage:,msg);broadcast.postMessage(msg);}functionrefreshTime(){var datenewDate();postMessage(date.getHours():date.getMinutes():date.getSeconds());}2.window.postMessage可以跨域比如有两个页面父页面http://localhost:8080/message1.htmlhtmlheadmeta charsetutf-8title跨域父页面/titlemeta http-equivexpirescontent0/meta http-equivCache-Controlcontentno-cache//headbodydiv stylemargin-top:10px;;button onclickopenWindow();stylewidth:100px打开子页面/buttonbutton onclickopenIframe();stylewidth:100px打开iframe/button打开子页面或iframe任选一个br/input idsayvalue/button onclicksend();stylewidth:100px同源发送/buttonbutton onclicksend2();stylewidth:100px异源发送/buttonspan idcontent/span/diviframe idiframesrc/iframescript typetext/javascript//子页面var openner;//子页面 网址var urlhttp://localhost:8081;//监听消息window.addEventListener(message,(e){console.log(message1 收到消息,e);document.getElementById(content).innerHTMLe.databr/;})//同源发送constsend(){let msgdocument.getElementById(say).value;console.log(message1 发送同源消息,msg);window.postMessage(msg,location.origin);}//打开子页面constopenWindow(){console.log(打开子页面)opennerwindow.open(url/message2.html,_blank ,window)}//打开子页面constopenIframe(){console.log(打开子页面 iframe);opennerwindow.frames[0];document.getElementById(iframe).srcurl/postMessage2.html;}//异源发送constsend2(){if(openner){let msgdocument.getElementById(say).value;console.log(openner 发送异源消息,msg);openner.postMessage(msg,url);}else{console.log(请先打开跨域页面);}}/script/body/html子页面http://localhost:8081/message2.htmlhtmlheadmeta charsetutf-8title跨域子页面/titlemeta http-equivexpirescontent0/meta http-equivCache-Controlcontentno-cache//headbodydiv stylemargin-top:10px;;input idsayvalue/button onclicksend();stylewidth:100px同源发送/buttonbutton onclicksend2();stylewidth:100px异源发送/buttonbr/br/span idcontent/span/divscript typetext/javascriptvar urlhttp://localhost:8080;//监听消息window.addEventListener(message,(e){console.log(message2 收到消息,e);document.getElementById(content).innerHTMLe.databr/;})//同源发送constsend(){let msgdocument.getElementById(say).value;console.log(message2 发送同源消息,msg);window.postMessage(msg,location.origin);}//异源发送constsend2(){let msgdocument.getElementById(say).value;console.log(message2 发送异源消息,msg);//打开者或者 iframe父类let dadwindow.opener||window.parent;//如果url填写 *则发送的消息允许任何打开message2的父页面都可以监听到dad.postMessage(msg,url);}/script/body/htmljsonpJSONP是一种跨域数据请求的技术它通过动态创建script标签来实现请求。不安全。核心方法functionhandleJSONP(data){console.log(data);}var scriptdocument.createElement(script);//服务器返回时会根据callback参数创建一个名为handleJSONP这个的回调函数script.srchttps://example.com/api/data?callbackhandleJSONP;document.body.appendChild(script);完美展示jsonp(url,params){// 1 根据 url 和params 拼接请求地址url?for(let k in params){urlkparams[k]}// 2 拼接 callbackconstcallbackNameitcast(newDate()-0)urlcallbackcallbackName// 3 动态创建script标签constscriptdocument.createElement(script);script.typetext/javascript;returnnewPromise((resolve,reject){// 给window添加一个函数就相当于全局函数window[callbackName]function(data){// data 就是 JSONP接口返回的数据console.log(jsonp callback:,data);// 调用resolve获取数据resolve(data)// 删除掉添加给window的属性delete window[callbackName]// 移除 script 标签document.head.removeChild(script)}script.srcurl;document.head.appendChild(script);})}jsonp(url,{param:xx,}).then((res){console.log(res:,res);})