允许子 iframe 访问父 iframe 中的特定 javascript 函数

Question

我需要能够在我的应用中安全地运行未经验证的代码，并且需要向 iframe 显示一些功能。在 iframe 中编写的代码将需要来自我的站点的一些数据，我认为最好的方法可能是通过子调用一个函数，然后触发父发出 ajax 请求。这是可行的和/或最好的方法吗？

Answer 1

您通常应该假设 iframe 不能直接与其父级对话；这就像一个标签能够控制另一个标签。

处理两个相关 iframe 之间（尤其是跨域）之间通信的最佳方式是使用 postMessage()。这允许您配置事件以侦听正在传递的消息并在它们到达时处理它们。它还提供对允许哪些域发送消息的控制。

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

function receiveMessage(e) {
  console.log('received message', e.data);
}

使用这种方法，您可以传递数据、使用不同的消息触发不同的操作等。

这就是 YouTube API 的工作方式，允许开发者在 iframe 中加载视频播放器，同时仍会监听播放事件、暂停视频、切换视频源等。