1

If the parent and iframe were both on the same domain, we can call a function of the parent window from iframe:

iframe code:

// here we call 'myFunction' which is a parent function

window.postMe = "postMe value here";
window.parent.myFunction(postMe);

In the parent window, we can define a function like this:

function myFunction(postMe) {
    ((console&&console.log)||alert)("postMe= " + postMe);
}

And the code above logs the "postMe" value correctly.

But my question is how can I call the function of iframe from parent.

To be more clear I want this code on my iframe:

 function myFunction(postMe) {
        ((console&&console.log)||alert)("postMe= " + postMe);
    }

then I want to be able to call myFunction(postMe); on the parent ...

Note: I can't select the iframe like HTMLIFrameElement.contentWindow or window.frames['name'] for some reasons.

The final goal is: I want to pass a variable multiple times and every time I want from parent to the iframe. @CertainPerformance has a solution for this that I can't make it work.

iframe code:

window.postMeToParent= "post me to parent";
window.parent.myFunction(postMeToParent, (response) => {
  console.log(response);
});

parent code: 

function myFunction(postMeToParent, callback) {
  const postMeToiframe= "post me to iframe";

  // do something with postMeToiframe in parent:
  ((console&&console.log)||alert)(postMeToParent);

  // do something with postMeToiframe in child:
  callback(postMeToiframe);
}

The problem is it only can be run via iframe and I can't call the function and pass variables from parent.

Sara Ree
  • 3,417
  • 12
  • 48
  • _"Note: I can't select the iframe like HTMLIFrameElement.contentWindow or window.frames['name'] for some reasons."_ What reasons? Those reasons may well prevent any other sensible solution. – James Thorpe Jun 05 '19 at 07:41
  • I'm using Articulate Storyline and that causes the problem... – Sara Ree Jun 05 '19 at 07:43

1 Answers1

1

You can pass the function object from iframe to parent function and invoke from there.

On the parent:

function tunnel(fn){
     fn('postMe');
}

On the iframe:

function myFunction(postMe) {
     ((console&&console.log)||alert)("postMe= " + postMe);
}
window.parent.tunnel(myFunction);

If your parent document will not be loaded at that point, try using below 

var parentDocument = window.parent.document; 
$( parentDocument ).ready(function() { 
     window.parent.tunnel(myFunction); 
}
Vardaman PK
  • 313
  • 2
  • 7
  • But there is a problem that is really confusing me: I want to call myFunction (the iFrame function) with user click. Here I get TypeError: window.parent.tunnel is not a function because the iframe is loaded but the parent side code was not executed – Sara Ree Jun 05 '19 at 08:03
  • If your parent document will not be loaded at that point, try using below ` var parentDocument = window.parent.document; $( parentDocument ).ready(function() { window.parent.tunnel(myFunction); } ` – Vardaman PK Jun 05 '19 at 08:07
  • Uncaught TypeError: window.parent.tunnel is not a function – Sara Ree Jun 05 '19 at 08:19
  • parent code is executed whenever user clicks... I think that causes the problem... – Sara Ree Jun 05 '19 at 08:20