在前端开发中，处理跨域通信是必不可少的一环。一种比较常用的方式就是基于 PostMessage 实现的 RPC（Remote Procedure Call）调用。而 postmessage-rpc 就是一款基于 PostMessage 实现的简单易用的 RPC 库，本文将介绍如何使用该库实现前端间跨域通信。
1. 安装
安装 postmessage-rpc 可以使用 npm 工具：
npm install postmessage-rpc
2. 使用方式
创建对象
我们可以使用 create 方法创建一个 RPC 对象：
const RpcClient = require('postmessage-rpc').Client;
const rpcClient = new RpcClient({
window: otherWindow, // 构造函数参数，其他窗口
targetOrigin: targetOrigin, // 构造函数参数，目标 origin
timeout: 3000 // 构造函数参数，超时时间
});window: 必填，表示其他窗口的 window 对象。targetOrigin: 必填，表示目标窗口的域名。timeout: 选填，表示最大等待时间。
定义 API
我们可以通过 define 方法来定义函数：
rpcClient.define('add', function(a, b) {
return a + b;
});这个方法支持异步操作，所以它可以返回 Promise 对象。
调用 API
我们可以使用 call 方法来调用 API：
rpcClient.call('add', [1, 2]).then(function (result) {
console.log(result); // 输出 3
});这个方法会返回 Promise 对象，调用成功时 resolve(result)，否则 reject(error)。
3. 示例代码
在一个 window 中执行如下代码：
-- -------------------- ---- ------- ----- --------- - ---------------------------------- ----- --------- - --- ----------- ------- ------- -- ----------- ------------- ---- -- --------- ------ --- ----------------------- ----------- -- - ------ - - -- ---
在另一个 window 中执行如下代码：
-- -------------------- ---- ------- ----- --------- - ---------------------------------- ----- --------- - --- ----------- ------- ------------ -- ----------- ------------- ---- -- --------- ------ -------- ---- -- ----------- --- --------------------- --- ----------------- -------- - -------------------- -- -- - ---
以上就是使用 postmessage-rpc 实现前端跨域通信的简单教程，希望对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005607181e8991b448de983