javascript - 如何使用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;
}