福州网站公司,微信公众号怎么创建多少钱,吉林住房和城乡建设厅网站,广告图片网站一、汇总 二、同源策略 三、webSocket (无跨域限制)
优点#xff1a;无跨域限制 缺点#xff1a;成本高
四、客户端存储
1、localStorage onStorage 例子#xff1a; 2、定时器 客户端存储 例子#xff1a; 缺点#xff1a;
五、postMessage #xff08;无跨域…一、汇总 二、同源策略 三、webSocket (无跨域限制)
优点无跨域限制 缺点成本高
四、客户端存储
1、localStorage onStorage 例子 2、定时器 客户端存储 例子 缺点
五、postMessage 无跨域限制 例子 index.html
bodydiviframe src./ifr.html idifr stylewidth:600px; height:300px/iframe/div主窗口divdivMessage:/divdiv idmessages/div/divscriptwindow.addEventListener(message, function (event) {messages.innerHTML div${event.data}/div })setInterval(() {ifr.contentWindow.postMessage(message from index.html, ${Date.now()})}, 5000)/script
/bodyifr.html
bodyiframe窗口divdivMessage:/divdiv idmessages/div/divscriptwindow.addEventListener(message, function (event) {messages.innerHTML div${event.data}/div })setInterval(() {window.parent.postMessage(message from ifr.html, ${Date.now()})}, 5000)/script
/body六、Broadcast Channel 事件广播 超级好用
允许同源的不同浏览器窗口、Tab页、frame或者iframe下的不同文档之间相互通信缺点同源策略
核心代码
例子
bodysectioniframe src./page1.html/iframeiframe src./page2.html/iframe/section/bodybodyh3Page 1/h3section stylemargin-top:50px; text-align: centerinput idinputMessage valuepage 1的测试消息 /input typebutton value发送消息 idbtnSend /section idmessagesp收到的消息/p/section/sectionscriptvar messagesEle document.getElementById(messages)var messageEl document.getElementById(inputMessage)var btnSend document.getElementById(btnSend)var channel new BroadcastChannel(channel-BroadcastChannel)channel.addEventListener(message, function (ev) {var msgEl document.createElement(p)msgEl.innerText ev.data.date ev.data.from : ev.data.messagemessagesEle.appendChild(msgEl)})btnSend.addEventListener(click, function () {var message messageEl.valuechannel.postMessage({date: new Date().toLocaleString(),message,from: page 1})})/script
/bodybodyh3Page 2/h3section stylemargin-top:50px; text-align: centerinput idinputMessage valuepage 2的测试消息 /input typebutton value发送消息 idbtnSend /section idmessagesp收到的消息/p/section/sectionscriptvar messagesEle document.getElementById(messages)var messageEl document.getElementById(inputMessage)var btnSend document.getElementById(btnSend)var channel new BroadcastChannel(channel-BroadcastChannel)channel.addEventListener(message, function(ev) {var msgEl document.createElement(p)msgEl.innerText ev.data.date ev.data.from : ev.data.messagemessagesEle.appendChild(msgEl)})btnSend.addEventListener(click, function() {var message messageEl.valuechannel.postMessage({date: new Date().toLocaleString(),message,from: page 2})})/script/body七MessageChannel 无跨域限制
Channel Messaging API 的 MessageChannel接口允许我们创建一个新的消息通道并通过它的两个MessagePort属性发送数据缺点 需要先创建联系
核心代码
例子
bodyiframe idifr src./ifr.html stylewidth:600px; height:300px/iframediv主窗口/divdivdivMessage:/divdiv idmessages/div/divscriptconst channel new MessageChannel()var ifr document.querySelector(iframe)ifr.onload function () {ifr.contentWindow.postMessage(__init__, *, [channel.port2])}// 监听消息channel.port1.onmessage onMessagefunction onMessage(e) {messages.innerHTML div${event.data}/div }// 轮询发送setInterval(function(){channel.port1.postMessage(message from index.html, ${Date.now()})}, 5000)/script
/bodybodyiframe窗口divdivMessage:/divdiv idmessages/div/divscriptwindow.addEventListener(message, function (event) {if (event.data __init__) {initChannel( event.ports[0])}})function initChannel(port) {port.onmessage function (event) {messages.innerHTML div${event.data}/div port.postMessage(message from the iframe, ${Date.now()});}}/script
/body八、SharedWorker
SharedWorker 是 Web Worker的一种 可单独开启一个进程用于同域页面通讯Web Worker可开启子进程执行JS但不能操作DOM缺点兼容性、同源策略
例子
