12

I've encountered the task to access parent window from iFrame, if the window in iFrame was loaded from another domain. If I understand correctly, all modern browsers do now allow to do this. So I'm here to find the best solution.

I'm going to accomplish this next way:

I have an overlay with an iFrame within it. This will work instead of pop-ups to prevent pop-up blockers to block my content. The task is to reload the main page when the document in the iFrame finishes some work. In a document, which will be loaded to an iFrame, I will add 

<div id="is_closed" class="false"></div>

In a parent window I'll add function, which will be called every second and check if this div still has class name "false". When this will be changed to "true", I'll call some callbacks.

If you have any better solution, please share it with me. Will appreciate any help.

Edit: This is impossible because it's not only impossible to manipulate parent window from child window, but vice versa too. My idea was to manipulate child window from parent window. I was wrong.

James Hill
  • 60,353
  • 20
  • 145
  • 161
Vitalii Lebediev
  • 632
  • 2
  • 10
  • 19
  • 2
    `If I understand correctly, all modern browsers do now allow to do this. So I'm here to find the best solution.` This **is** your solution. What you're asking is not possible. – James Hill Mar 20 '12 at 14:11
  • 10
    `postMessage` works in iframes across different domains. – kirilloid Mar 20 '12 at 14:13
  • 2
    Malgin: If this were possible, any Iframe content could hijack the hosting page. This has DELIBERATELY been disabled. No work-around no "best solution". – Diodeus - James MacFarlane Mar 20 '12 at 14:14

5 Answers5

42

If I were you I would check out window.postMessage. It may do what you want:

For reference see the following:

Community
  • 1
  • 1
jeremysawesome
  • 7,033
  • 5
  • 33
  • 37
  • 1
    This is the correct answer. Cross-domain js calls between windows (or iframes) are now possible in HTML5 using Window.postMessage. – Molomby Sep 17 '14 at 00:08
  • Except on IE < EDGE, when using in windows/frames across domains. – frandroid Jul 28 '16 at 19:02
  • 1
    yes, `window.postmessage` is the way to go... HOWEVER, you don't always have access to the child iframes code! so if you use your answer combined with mine you have a fully working solution! – 255.tar.xz May 05 '19 at 19:40
15

If I understand correctly, all modern browsers do now allow to do this. So I'm here to find the best solution.

This is your solution. What you're asking is not possible.

See related questions:

EDIT

As mentioned in the comments below, @JeremysAwesome's answer offers a method that would allow cross-domain requests under certain circumstances. See the SO question below for more information.

Ways to circumvent the same-origin policy

jeremysawesome
  • 7,033
  • 5
  • 33
  • 37
James Hill
  • 60,353
  • 20
  • 145
  • 161
  • 1
    I understand that this is impossible to _manipulate_ parent window from child window. What I'm looking for is how to _imitate_ this manipulation. In other words, some flag from child window on which parent window will run some piece of code, will do. – Vitalii Lebediev Mar 20 '12 at 14:28
  • 1
    @Malgin, again, this is not possible. You're asking for **script level interaction** between the pages. This is not possible. You cannot imitate something that cannot be done. There are lots of questions on SO that deal with this. See edit. – James Hill Mar 20 '12 at 14:34
  • 1
    The only thing that was not clear to me from you answers is that it is impossible to manipulate child window from parent window either. That was my thought that made me be more persistant. Thanks again. – Vitalii Lebediev Mar 20 '12 at 17:06
  • You can, however, change the window location. If you know the URLs in question and have control of both domains you could probably use query strings to send messages between the two. Sounds like you should pursue a better solution though. – TheXenocide May 02 '13 at 20:56
  • 4
    As others have pointed out, this actually _is_ possible, via postMessage for example. So @jeremysawesome answer should be the accepted one. – Don Ho Nov 22 '13 at 16:50
  • this is only possible if you have control of the parent and child elements, what about only having access to the child element? – lmblanes May 15 '19 at 14:29
7

but you can change the src attribute of the iframe (adding a #hashtag for example) and listen to the onhashchange event in the child window. Given that you're in position to change both pages.

Sabilv
  • 602
  • 1
  • 15
  • 44
grilly
  • 450
  • 4
  • 11
0

another way would be: setting the iframes src to a javascript: link 500-ish milliseconds after it loads. Example: 

setTimeout(function() {
  document.getElementsByTagName("iframe")[0].src = `javascript: 
      (function(){
          setInterval(function() {
          if (document.getElementById("is_closed").className.match(/true/g)) {
              ...//see @jeremysawesome on how to do window.postMessage
          }
      })()`
}, 500);

While @jeremysawesome 's answer did work, this will work on an embedded iframe no matter the host domain, this is great when working with websites hosted on domains such as blogspot.com that don't allow you to change this type of content easily...

Now obviously you'll still need to launch window.postMessage, more info on that can be found on @jeremysawesome 's answer

255.tar.xz
  • 700
  • 7
  • 23
-5

set a variable/item in sessionStorage and use it on both sides as you wish. localStorage can do it for longer times.

security risk is someone uses and manipulates this to hijack your side. BUT if someone wants to do so - there will allways be a possibility.

Remember: Life finds a way... ;-)

Gerd Dirk Zweäns
  • 26
  • 5