使用 postmessage 刷新 iframe 的父文档

Posted 2023-02-27

【中文标题】使用 postmessage 刷新 iframe 的父文档

【英文标题】：using postmessage to refresh iframe's parent document

【发布时间】：2011-04-17 13:13:04

【问题描述】：

我有一个greasemonkey 脚本，它打开一个iframe，其中包含来自不同子域的表单作为父页面。 我想在表单提交后刷新 iframe 时刷新父页面 我现在可以在 iframe 刷新时执行一个函数，但我无法让该函数影响父文档。 我知道这是由于浏览器安全模型造成的，并且我一直在阅读有关使用 postMessage 在两个窗口之间进行通信的内容，但我似乎无法弄清楚如何使用它向父级发送重新加载调用。 关于如何做到这一点的任何建议都会非常有帮助 谢谢

【参考方案1】：

用途：

window.parent.postMessage('Hello Parent Frame!', '*');

请注意，“*”表示“任何来源”。如果可能，您应该将其替换为目标原点。

在你的父框架中你需要：

window.addEventListener('message', receiveMessage, false);

function receiveMessage(evt)

  if (evt.origin === 'http://my.iframe.org')
  
    alert("got message: "+evt.data);
  

将“my.iframe.org”替换为 iFrame 的来源。 （您可以跳过来源验证，只是要非常小心处理您获得的数据）。

【讨论】：

注意 IE 不支持 'addEventListener' 所以使用 jQuery bind 或 someting

如果内部有多个 iframe，您可以将 parent 替换为 top 以到达最顶部的页面：window.top.postMessage('Hello Parent Frame!', '*');