来自iframe的事件触发

Question

我正在将第三方照片上传服务与我的应用集成.所以我通过iframe将它加载到我的页面中.

当上传服务完成上传我的照片后,它可以触发某个事件到我的父页面,即:

parent.$('body').trigger('photoUpload.complete');

或者它在父页面中触发一个函数,即:

window.parent.reloadParentPage();

无论如何,我在Chrome控制台中收到此警告:

Uncaught SecurityError: Blocked a frame with origin "https://photoupload.com" from accessing a frame with origin "https://website.com".

我意识到这是一个安全问题,如下所述:

http://www.w3.org/TR/2008/WD-access-control-20080912/

所以我想让原点https://photoupload.com访问我的网站.我在我的控制器中这样做了:

after_filter :set_access_control_headers

然后方法:

def set_access_control_headers 
  headers['Access-Control-Allow-Origin'] = "https://photoupload.com" 
  headers['Access-Control-Request-Method'] = '*' 
end

请注意,这不是https://photoupload.com照片上传服务,https://website.com而是我的网站.(例如清酒的虚构名称),但它们都托管在heroku上.

我该如何工作？

看到人们用这个成功的类似问题:

从iframe触发jQuery事件

更新

也许更好的问题是,我应该在哪个应用程序中设置标题？我在我的应用程序中假设？

更新II

有一个更好的方法吗？将iframe中的action/event/something发送到父页面,因此父页面可以以某种方式作出反应

Answer 1

只要您不必支持IE6或IE7,就可以使用在iframe和其父级之间发送跨域消息的首选方法window.postMessage(...).

既然你有能力修改上传服务,你应该让它调用这样的东西:

window.parent.postMessage('photoUpload.complete', 'https://website.com');

(第二个参数可以设置为'*'允许iframe发送消息而不管包含页面的域名,但相应地安全性较低 - 虽然没有发送实际数据,但在您的情况下可能不相关).

并且您的网站会使用类似的内容

if (!window.addEventListener) {
    // IE8 support (could also use an addEventListener shim)
    window.attachEvent('onmessage', handleMessage);
} else {
    window.addEventListener('message', handleMessage, false);
}

function handleMessage(event) {
  // check where the message is coming from - may be overkill in your case
  if (event.origin==='https://photoupload.org') {
    // check event type - again probably not required
    if (event.data==='photoUpload.complete') {
      // do your thing
    }
  }
}

如果你想将消息从外页发送回iframe,它基本上是相同的设置,但你发送:

iframe.contentWindow.postMessage(...)

如果需要IE7或IE6支持,postMessage()则不支持,但您可以使用http://easyxdm.net/wp/之类的内容