网站地图    收藏    合作   

主页 > 前端 > javascript >

js在浏览器的两个页面之间通信详解

来源:未知    时间:2021-02-04 15:29 作者:小飞侠 阅读:

[导读] js在浏览器的两个页面之间通信详解 两个浏览器窗口间通信总结: 1、localStorage 一个窗口更新localStorage, 另一个窗口监听window对象的”storage”事件,来实现通信。 //本窗口的设值代码...

js在浏览器的两个页面之间通信详解

两个浏览器窗口间通信总结:


1、localStorage

一个窗口更新localStorage,

另一个窗口监听window对象的”storage”事件,来实现通信。


// 本窗口的设值代码
localStorage.setItem('aaa', (Math.random()*10).toString())
 
// 其他窗口监听storage事件
window.addEventListener("storage", function (e) {
  console.log(e)
  console.log(e.newValue)
})


注:两个页面要同源(URL的协议、域名和端口相同)


2、WebSocket

每个页面开启同一个地址的WebSocket服务,利用send发送消息,利用onmessage获取消息的变化。


var ws = new WebSocket("ws://localhost:3000/")
ws.onopen = function (event) {
  // 或者把此方法注册到其他事件中,即可与其他服务器通信
  ws.send({now : Date.now()}); // 通过服务器中转消息
};
ws.onmessage = function (event) {
  // 消费消息
  console.log(event.data);
}


优点:

不仅能在不同窗口之间,还能跨浏览器,兼容性最佳。

缺点:

需要消耗点服务器资源


3、postMessage

postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信,可以实现跨文本档、多窗口、跨域消息传递。


消息发送:otherWindow.postMessage(message, targetOrigin);


otherWindow

其他窗口的一个引用,比如iframe的contentWindow属性、执行window.open返回的窗口对象、或者是命名过或数值索引的window.frames。

.message

要传递的数据,由于部分浏览器只能处理字符串参数,所以我们在传递参数的时候需要使用JSON.stringify()方法对对象参数字符串化

targetOrigin

通过窗口的origin属性来指定哪些窗口能接收到消息事件,

参考链接 :https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage


消息接收监听:监听message事件


//发送消息页面
<iframe onLoad="loadIFreamSite()"  id="loadIframeSite"   src="地址"  frameborder="0" scrolling="no" allowtransparency=true style="width: 100%;" ></iframe>
function loadIFreamSite(){
  var iframe = document.querySelector('#loadIframeSite');
  iframe.contentWindow.postMessage({a: 1}, '*');
}
//监听消息页面
window.addEventListener('message', function(e) {
     // 监听消息内容
}, true);


4、cookie + setInterval【差】

在页面A设置一个使用 setInterval 定时器不断刷新,检查 Cookies 的值是否发生变化,如果变化就进行刷新的操作。


缺点:相当浪费资源


5、SharedWorker

HTML5 中的 Web Worker 可以分为两种不同线程类型,

一个是专用线程 Dedicated Worker,

一个是共享线程 Shared Worker。


Dedicated Worker直接使用new Worker()即可创建,这种webworker是当前页面专有的。


SharedWorker可以被多个window、标签页、iframe共同使用,但必须保证这些标签页都是同源的

具体实列:

// a.html
<input id='number1' />
<input id='number2' />
<div class='result1'></div>

var first = document.querySelector('#number1');
var second = document.querySelector('#number2');

var result1 = document.querySelector('.result1');

if (!!window.SharedWorker) {
  var myWorker = new SharedWorker("b.js");

  first.onchange = function() {
    myWorker.port.postMessage([first.value, second.value]);
    console.log('Message posted to worker');
  }

  second.onchange = function() {
    myWorker.port.postMessage([first.value, second.value]);
    console.log('Message posted to worker');
  }

  myWorker.port.onmessage = function(e) {
    result1.textContent = e.data;
    console.log('Message received from worker');
    console.log(e.lastEventId);
  }
}

// b.js
onconnect = function(e) {
  var port = e.ports[0];
  port.onmessage = function(e) {
    var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
    port.postMessage(workerResult);
  }
}


6、直接引用

其实本质上就是直接获取对方DOM


// 父页面获取子iframe
document.getElementById('iframe的id').contentWindow.document
// 子iframe获取父页面
window.parent.document

缺点

只适用于两个页面在同一域,比如在A页面中嵌套一个同源的iframe


自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论