从子级到父级的跨站点 iframe postMessage

Posted 2023-03-05

【中文标题】从子级到父级的跨站点 iframe postMessage

【英文标题】：Cross-site iframe postMessage from child to parent

【发布时间】：2014-05-16 17:31:00

【问题描述】：

我在浏览我的问题时从 SO 中找到了this sample，但我想确切地知道如何在我的场景中使用它。

我有一个来自另一个域的 iframe，我想检测 iframe URL 何时从另一个域中的一个页面更改为另一个页面。所以，我想的是当 iframe 中的第二页打开时有这样的东西：

<script type="text/javascript">
    $(document).ready(function() 
parent.postMessage("Second Page");

</script>

这就是我所需要的，我只需要接收 iframe 具有不同 url 的消息。现在在父页面上，我可能会有这样的内容：

<script type="text/javascript">
    $(document).ready(function() 
        $('#frame').load(function ()  
            var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

// Listen to message from child window
eventer(messageEvent,function(e) 
 var secondPageValue = // I want to get the value from the child page here, how can I do that?
,false);               
        );
    );
</script>

我第一次尝试使用这个 postMessage 选项。我是否需要在子端包含一些 JS 库（例如 jQuery）才能完成这项工作？

【问题讨论】：

html5 - Cross Browser Iframe postmessage - child to parent?的可能重复

@C_B 在联系 iframe 所有者之前，我正在尝试确认是否可行。谢谢

【参考方案1】：

检查http://davidwalsh.name/window-iframe。这是一个完美的工作示例。

父对象从子对象提供对主窗口的引用。因此，如果我有一个 iFrame 并在其中控制父级，则控制台将显示：

// Every two seconds....
setInterval(function() 
    // Send the message "Hello" to the parent window
    // ...if the domain is still "davidwalsh.name"
    parent.postMessage("Hello","http://davidwalsh.name");
, 3000);

既然我们现在已经控制了窗口，我们可以向它发送消息：

// Create IE + others compatible event handler
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

// Listen to message from child window
eventer(messageEvent,function(e) 
  console.log('parent received message!:  ',e.data);
,false);

上面的指令触发 iFrame 每 3 秒向父窗口发送一条消息。不需要来自主窗口的初始消息！

【讨论】：

tnx Raidri.. 会做到的。

【参考方案2】：

使用 postMessage 时需要设置 targetOrigin。

<script type="text/javascript">
    $(document).ready(function() 
       parent.postMessage("Second Page",'*');
    
</script>

然后在主机页面上。

function addAnEventListener(obj,evt,func)
    if ('addEventListener' in obj)
        obj.addEventListener(evt,func, false);
     else if ('attachEvent' in obj)//IE
        obj.attachEvent('on'+evt,func);
    


function iFrameListener(event)
     secondPageValue = event.data;


var secondPageValue='';

addAnEventListener(window,'message',iFrameListener);

【讨论】：

这段代码有几个问题。例如，您定义函数 addEventListener，然后依赖 window.addEventListener 刚刚被您的函数声明覆盖。此外，您可能应该检查 obj 中的“addEventListener”而不是窗口。