javascript - 访问和修改 iframe 内容，postMessage 与 jQuery.contents()

Question

这是可能的

$('#iframe_id').contents().find('.stuff_to_modify).addClass('whatever');

但是也可以使用window.postMessage事件，通过从 iframe 向脚本发送 do_something 消息，该脚本在收到消息时进行修改（添加该类）。

我想知道我应该走哪条路，这两种方法有什么区别（缺点，优点）。

jQuery 方法看起来更好，因为我不再需要在 iframe 中包含任何脚本

Answer 1

window.postMessage和您提供的 jQuery 示例之间的主要区别在于， postMessage 支持跨域通信。

这意味着，如果托管 iframe 的父页面来自域 A，而 iframe 的内容来自域 B，则 postMessage 允许您进行通信，而 jQuery 方法将导致安全错误。

您提供的链接是浏览器的 window.postMessage 实现的 java 脚本包装器，并回退到不支持它的浏览器的窗口位置哈希轮询。其他好处列在您的链接本身中。

因此，如果这两个页面来自同一个来源，即来自同一个域，那么您可以使用 jQuery 方法本身。如果它来自两个不同的来源，您可能必须使用 JS 包装器。