iframe postMessage 替代方案存在吗？例如。将函数绑定到 iframe？

Question

背景

可以在没有 CORS 的情况下从父窗口访问 iframe 中的文档以及从 iframe 访问父窗口的文档，或者当 iframe 未沙箱化时每个 iframe 文档的来源与其他 iframe 文档的来源相同。

沙盒 iframe 中没有

allow-same-origin

的文档可以像文档附带的响应标头中禁止访问 CORS 策略一样进行访问：不能。

postMessage 到另一个（iframe）窗口，如果该窗口监听

message

，则允许源窗口和目标窗口之间进行通信。

问题

postMessage

是基于文本的，结构化克隆算法不支持函数和对它们的引用。

问题

存在或计划或授予哪种方式允许将函数分配给另一个窗口（特别是父窗口的 iframe）以便从该另一个窗口调用？

更多信息

这就像从一个源窗口为另一个窗口指定的 API，它可以是一个 JavaScript 对象，其键值是一个函数。

Answer 1

浏览器中不存在您所要求的内容。但你可以用一点 JS 自己构建它。

第一步是将所有 RPC 函数放在一个对象上，然后您可以编写几行来接收消息并调用您的函数。

window.addEventListener(
  "message",
  ({ data }) => {
    const [func, ...args] = data
    RPC[func](...args)
  },
  false
)

然后在父页面中您将有一个进行调用的函数。

const setupRPC = (target) => (func) => (...args) {
  target.postMessage([func, ...args], '*')
}

现在要创建 RPC 调用，您首先需要创建一个工厂函数。

const myiframe = document.getElementById('myiframe')
const createIframeFunc = setupRPC(myiframe)

然后我们可以用它来创建RPC函数。

const myFunc = createIframeFunc('myFunc')

然后我们就调用它。

myFunc({ a: ['b', 'c'] } )

postMessage 将为您序列化和反序列化您的数据。