Get cross-domain iframe feedback

Question

I have a situation where I have an iframe hosting a third-party site. I need to pick up only that the iframe has navigated to its final "success" url, so I can respond.

However, as you may know, modern browsers prevent you from accessing the iframe document object, even the location, because of CORS security issues.

Right now, I am running a counter in the onload event of the iframe, and performing my response when the counter hits a certain number.

But this is very hacky and won't be reliable enough for a new situation where I am having to use this mechanism.

So I'm looking for some wizard to tell me a better way. I just need to know when it's reached a certain URL.

BTW jquery is not an option; this is an Angular2 app.

Thanks! frood

Answer 1

If you control both parent and embedded websites (And don't have to support very old browsers) I would consider using the postMessage API . It enables simple event communication between the parent and the child.

Here is a nice simple example - link