发出与postMessage从父级到子级iFrame的通信

Question

我在从父窗口到子iFrame进行通信时遇到问题.但另一方面,一切都很完美.以下是我如何获取chil iFrame对象以触发postMessage函数:

var iFrame = document.getElementById('Frame').contentWindow;

当我在控制台中打印它时,我得到以下内容:

Window {parent: Window, opener: null, top: Window, length: 0, frames: Window…}

当我进入postMessage函数时,如下所示:

iFrame.postMessage("message", "http://contoso.com");

它在加载页面时显示错误:iFrame.postMessage不是函数.当我在控制台中执行postMessage时,我得到一个未定义的

我究竟做错了什么 ？

Answer 1

我无法使用某种querySelector方法来实现这一点。

对我有用的是以下内容。我将这两个网页称为parent带有 iframe 的网页，以及srciframe 内的页面。

在src页面上，我发布一条消息，以parenturl 为来源：

// src
window.parent.postMessage({
  type: "connect",
  url: window.location.href
}, "http://iframeparent.dev", );

然后在parent页面中，我听这个。它将有一个名为source该 iframe 的属性。该属性可以发布到.

// parent
window.addEventListener("message", (event) => {
  // this is the magic connection:
  event.source; 
}, false);

所以你可以这样做：

// parent
let sources = [];

window.addEventListener("message", (event) => {
  sources.push(event.source);
}, false);

function something() {
  sources.forEach(source => {
    source.postMessage({some: "data"}, "http://iframesrc.dev")
  })
}

Answer 2

试试这个

var iFrame = document.getElementById('Frame');
iFrame.contentWindow.postMessage("message", "http://contoso.com");

我也有这个问题.我从这个网站找到了解决方案https://www.viget.com/articles/using-javascript-postmessage-to-talk-to-iframes