javascript - 尽快检测跨域父级中的同源 iframe

Question

我在同一个域（我控制的域）上有两个 iframe，嵌入到不同域的页面中。我们将它们称为 iframe A 和 iframe B。

页面中可以有多个任一类型的 iframe。

iframe B 的工作很简单：它的工作是尽快在页面上的所有 iframe A 中调用一个函数。

因此，如果 iframe A 像这样嵌入：

<iframe src="https://domain-i-control.net/iframeA.html" name="iframeA"></iframe>

iframe B 可以包含以下内容：

<script>
parent.iframeA.addEventListener("load", function () {
  this.iframeAFunction()
})
</script>

当只有一个 iframe A 时，这似乎工作正常。但是，当有多个 iframe A 时，它parent.iframeA是不明确的，因此不会在所有 iframe A 中调用该函数。相反，我需要能够动态保护对所有 iframe A 的引用。

如何尽快从 iframe B 调用所有 iframe A 中的函数？

---

我尝试使用parent.frames来遍历父页面中的框架：

<!-- iframeB.html -->
<script>
// Array.from() fails: Symbol.iterator cannot be accessed cross-origin
Array.prototype.slice.call(parent.frames).forEach(frame => {
  // Missing: skip this frame if it's not iframeA
  frame.addEventListener("load", () => {
    frame.iframeAFunction()
  })
})
</script>

...但似乎，当此代码立即运行时，不能保证所有父级的框架都已注册并存在于parent.frames.

我尝试将上述内容包装在事件侦听器中parent，以延迟执行，直到确保所有帧都已注册：

parent.addEventListener("load", () => {
  // ... the above
})

...但addEventListener不允许通过同源策略。

我认为在上面的代码段中更改parent为window不会有帮助，因为这只会延迟执行直到 iframe B 加载，但不一定是所有 iframe A。

甚至postMessage需要在发送消息之前保护对目标框架的引用（但在这里似乎没有用，因为我的 iframe 彼此位于同一来源）。

标签： javascriptiframecross-domain