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

时间:2017-04-15 22:50:32

标签: javascript html5 security iframe

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

1 个答案:

答案 0 :(得分:1)

您通常应该假设iframe无法直接与其父级对话;这就像一个标签可以控制另一个标签。

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

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

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

使用此方法,您可以传递数据,使用不同的消息触发不同的操作等。

这就是YouTube API的工作方式,允许开发人员在iframe中加载视频播放器并仍然可以收听回放事件,暂停视频,切换视频来源等。