javascript - 两个 Iframe 正在通信 : SecurityError

Question

我有两个 iframe。这些 iframe 通过 postMessage 进行通信。

在一个 iframe 中，如果我执行以下操作，它将不起作用。

// Broadcast to all iframes.
parent.frames.forEach(function (frame) {
  frame.postMessage(data, 'http://localhost:4000');
});

错误:

Uncaught SecurityError: Blocked a frame with origin "http://..." from accessing a frame with origin "http://...". Protocols, domains, and ports must match.

但是，如果我执行以下操作，效果会很好。没有错误信息。为什么？

for (var i = 0 ; i < parent.frames.length ; ++i) {
  parent.frames[i].postMessage(data, 'http://localhost:4000');
}

Answer 1

这里的问题看起来可以理解为

Why does parent.frames.forEach give a SecurityError when I can iterate over them in a for?

这是因为parent.frames 不是Array而是Window实例，因此，当您尝试访问 .forEach，它正在寻找安全性阻止访问的不同 Window 上的属性。

来自 window.frames 的 MDN 页面(parent 是一个 Window)

Returns the window itself, which is an array-like object, listing the direct sub-frames of the current window.

如果你想使用.forEach，从(引用)Array 的 原型(prototype)中获取它

Array.prototype.forEach.call(parent.frames, callback);