javascript - Event triggering from iframe - Stack Overflow

admin管理员组

文章数量:1315079

I'm integrating a third party photo upload service with my app. So I'm loading it in my page via iframe.

When the upload service is done with uploading my photo it can either trigger certain event to my parent page i.e :

parent.$('body').trigger('photoUploadplete');

or it triggers a function in the parent page i.e :

window.parent.reloadParentPage();

In any case I get this warning in my chrome console :

Uncaught SecurityError: Blocked a frame with origin "" from accessing a frame with origin "".

I realize this is a security issue as described here :

/

So I wanted to enable the origin to access my site. I did this in my controller :

after_filter :set_access_control_headers

Then the method :

def set_access_control_headers 
  headers['Access-Control-Allow-Origin'] = "" 
  headers['Access-Control-Request-Method'] = '*' 
end

Please not that is the photo upload service and is my website. (Imaginary names for example sake), but they are both hosted on heroku.

How do I make this work?

Saw similar questions that people had success with this :

Triggering a jQuery event from iframe

Update

Maybe a better question would be, in which app should I set the headers? I was assuming in my app?

Update II

Is there a better way to do this? Send action/event/something from iframe to the parent page, so the parent page can react in some way

I'm integrating a third party photo upload service with my app. So I'm loading it in my page via iframe.

When the upload service is done with uploading my photo it can either trigger certain event to my parent page i.e :

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

or it triggers a function in the parent page i.e :

window.parent.reloadParentPage();

In any case I get this warning in my chrome console :

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

I realize this is a security issue as described here :

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

So I wanted to enable the origin https://photoupload. to access my site. I did this in my controller :

after_filter :set_access_control_headers

Then the method :

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

Please not that https://photoupload. is the photo upload service and https://website. is my website. (Imaginary names for example sake), but they are both hosted on heroku.

How do I make this work?

Saw similar questions that people had success with this :

Triggering a jQuery event from iframe

Update

Maybe a better question would be, in which app should I set the headers? I was assuming in my app?

Update II

Is there a better way to do this? Send action/event/something from iframe to the parent page, so the parent page can react in some way

• javascript
• jquery
• ruby-on-rails
• iframe

Share Improve this question Follow edited May 23, 2017 at 12:22 CommunityBot 111 silver badge asked May 7, 2014 at 16:00 Gandalf StormCrowGandalf StormCrow 26.2k7070 gold badges179179 silver badges268268 bronze badges 10

• It would help a lot if you used sane/short/meaningful domain names. Heroku is not a reason in here, so this information gives us nothing. Said that, you should set headers in parent page, allowing access from iframe. You can at first try setting Access-Control-Allow-Origin: * on both sides and see if this resolves the problem. – Mike Szyndel Commented May 8, 2014 at 11:58
• @MichaelSzyndel thanks for you response Michael. I edited the question I hope the names make more sense now. Website. is my website and photoupload. is the url I'm embeding in the iframe. One question, why do I need to allow origin on the both sides? – Gandalf StormCrow Commented May 8, 2014 at 12:23
• You probably don't but it's a good starter. If this works then you can try removing it one one side (the iframe content) and retest. I would suspect that browser behaviour will differ greatly in here so top-down approach makes more sense to me. – Mike Szyndel Commented May 8, 2014 at 12:26
• @MichaelSzyndel ok thanks I will try that then and see if that works, is there maybe a better way of doing the thing I'm trying to acplish. Letting the parent page know when something happened in the iframe, in some way. I've tried with invoking a function on parent page or invoking a event observed by a listener on a parent page – Gandalf StormCrow Commented May 8, 2014 at 12:32
• 1 The access control headers are not going to do it for you - as Barmaley.exe points out they are for XHR requests, not inter-window munication - you need to use postMessage or an alternative. Good news that you can modify the service - my answer should work for you then. – CupawnTae Commented May 11, 2014 at 8:53

 |  Show 5 more ments

2 Answers 2

Sorted by: Reset to default 9 +500

As long as you don't have to support IE6 or IE7, the preferred way to send cross-domain messages between an iframe and its parent is to use window.postMessage(...).

Since you have the ability to modify the upload service, you should have it invoke something like this:

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

(the second parameter can be set to '*' to allow the iframe to send messages regardless of the containing page's domain, but that's correspondingly less secure - may not be relevant in your case though as no actual data is being sent).

and your site would use something like

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 ing from - may be overkill in your case
  if (event.origin==='https://photoupload') {
    // check event type - again probably not required
    if (event.data==='photoUpload.plete') {
      // do your thing
    }
  }
}

And if you want to send messages back from the outer page to the iframe, it's basically the same setup but you send with:

iframe.contentWindow.postMessage(...)

If IE7 or IE6 support is required, postMessage() is not supported but you could use something like http://easyxdm/wp/

I guess this line should work as well

window.parent.$(window.parent.document).trigger('photoUpload.plete');

Explanation: In your code parent.$('body').trigger('photoUpload.plete'); 'body' is referring to iframe body and not the parent window body.

本文标签： javascriptEvent triggering from iframeStack Overflow