浏览器窗口跨域名通讯postMessage

最新推荐文章于 2025-03-31 10:55:32 发布

考拉菜鸟

最新推荐文章于 2025-03-31 10:55:32 发布

阅读量637

点赞数

文章标签： javascript html5 跨域通讯

本文链接：https://blog.youkuaiyun.com/chunmeizhang_88/article/details/120303923

版权

本文详细介绍了Web API中的postMessage方法，用于实现不同窗口（如iframe、弹窗）以及主线程与worker线程之间的安全通信。通过实例展示了如何设置目标origin、序列化数据以及验证消息来源，确保数据安全传输。同时，讲解了接收和响应消息的处理函数，以及在实际场景中应用postMessage进行信息交互的步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

postMessage

//语法: https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage
otherWindow.postMessage(message, targetOrigin, [transfer]);

  otherWindow
其他窗口的一个引用，比如iframe的contentWindow属性、执行window.open返回的窗口对象、或者是命名过或数值索引的window.frames。
  message
将要发送到其他 window的数据。它将会被结构化克隆算法序列化。因此不限制数据类型, string, object, ..都可以被发送; 兼容性问题, 最好传输字符串, 使用JSON.stringify()方法

/*
 * A窗口的域名是<http://a.example.com>，以下是A窗口的script标签下的代码：
 */

// popup是另一个窗口的引用
var popup = window.open("http://b.example.org");

// 如果弹出框没有被阻止且加载完成

// 这行语句没有发送信息出去，即使假设当前页面没有改变location（因为targetOrigin设置不对）
popup.postMessage("The user is 'bob' and the password is 'secret'", "https://secure.example.net");

// 假设当前页面没有改变location，这条语句会成功添加message到发送队列中去（targetOrigin设置对了）
const obj = { foo: 'this is foo', baz: 'number' }
// 使用定时器给页面一点加载时间, 都在页面加载慢,导致事件还未被注册监听
 setTimeout(() => {
 	popup.postMessage(JSON.stringify(obj), "http://b.example.org");
 }, 200);

function receiveMessage(event) {
  // 我们能相信信息的发送者吗?  (也许这个发送者和我们最初打开的不是同一个页面).
  if (event.origin !== "http://b.example.org")
    return;

  // event.source 是我们通过window.open打开的弹出页面 popup
  // event.data 是 popup发送给当前页面的消息 "hi there yourself!  the secret response is: rheeeeet!"
}
window.addEventListener("message", receiveMessage, false);

/*
 * 弹出页 popup 域名是<http://b.example.org>，以下是script标签中的代码:
 */

//当A页面postMessage被调用后，这个function被addEventListener调用
function receiveMessage(event) {
  // 我们能信任信息来源吗？
  if (event.origin !== "http://a.example.com")  return;
    
  if ('key' in e.data && 'ser' in e.data) {
 		// event.data 是 { foo: 'this is foo', baz: 'number' }
        alert(e.data)
        JSON.parse(e.data)
   }

  // event.source 就当前弹出页的来源页面
  // 假设你已经验证了所受到信息的origin (任何时候你都应该这样做), 一个很方便的方式就是把event.source
  // 作为回信的对象，并且把event.origin作为targetOrigin
  event.source.postMessage("hi there yourself!  the secret response is: rheeeeet!", event.origin);
}

window.addEventListener("message", receiveMessage, false);

//创建多线程环境, 在主线程中创建新线程 worker线程
const worker = new Worker('一个网络脚本文件.js, 例如: https://xxx.xx.com/worker.js')

// 向worker线程发送消息
worker.postMessage(...)

//结束关闭线性
worker.terminate()

// worder.js文件内需要监听
self..addEventListener("message", receiveHandle, false);
function receiveHandle() {
	self.postMessage('向主线程发送消息');
	// 关闭
	self.close()
}