如何使用 window.postMessage 来动态嵌入 iframe？

Question

我的页面上有多个动态框架。所有的 iframe 都在同一个域下。例如

<iframe src="data.php?id=1"> </iframe>
<iframe src="data.php?id=2"> </iframe>
<iframe src="data.php?id=3"> </iframe>

如您所见，iframe 链接到同一页面但 ID 不同。

所以我正在使用 for 循环将数据发送到 iframe。（代码如下）

var iframes = document.getElementsByClassName('iframe');
for(var i = 0; i < iframes.length; i++)
{
    iframes[i].contentWindow.postMessage("getName","http://localhost/data.php");
}

我不确定要在 postMessage 函数的 origin 参数（即第二个参数）中放入什么。

在 iframe 上我有这段代码来处理消息。

window.addEventListener("message", receiveMessage, false);
function receiveMessage(event)
{
    //event.source.postMessage("hi", event.origin);
    console.log('Message received');
}

但我在控制台中没有看到任何内容。

可能是哪里出了问题？？

Update

我发现除了使用 postMessage 之外，我还可以访问 javascript 函数中的内容。现在的问题是 - 我还没有想出如何完成这个的方法。

我想通过 javascript 访问 iframe 的 title 元素的 textnode。

Answer 1

这将获取您的 iFrame 的标题。

var iframes = document.getElementsByClassName('iframe');
for(var i = 0; i < iframes.length; i++){
    iframes[i].contentWindow.document.getElementsByTagName('title')[0].innerHTML;
}

如何使用 window.postMessage 来动态嵌入 iframe？

How to use window.postMessage to dynamic embedded iframes?

javascript

iframe

postmessage