背景
可以在没有 CORS 的情况下从父窗口访问 iframe 中的文档以及从 iframe 访问父窗口的文档,或者当 iframe 未沙箱化时每个 iframe 文档的来源与其他 iframe 文档的来源相同。
沙盒 iframe 中没有
allow-same-origin
的文档可以像文档附带的响应标头中禁止访问 CORS 策略一样进行访问:不能。
postMessage 到另一个(iframe)窗口,如果该窗口监听
message
,则允许源窗口和目标窗口之间进行通信。
问题
postMessage
是基于文本的,结构化克隆算法不支持函数和对它们的引用。
问题
存在或计划或授予哪种方式允许将函数分配给另一个窗口(特别是父窗口的 iframe)以便从该另一个窗口调用?
更多信息
这就像从一个源窗口为另一个窗口指定的 API,它可以是一个 JavaScript 对象,其键值是一个函数。
浏览器中不存在您所要求的内容。但你可以用一点 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 将为您序列化和反序列化您的数据。