Iframe-resizer: Send Message to child

[mouse0270]

How do I call a function from the parent window that exists in the frame? Instead of the child talking to the parent how do I get the parent to talk to the child?

[davidjbradshaw]

https://github.com/davidjbradshaw/iframe-resizer#iframe-object-methods

and then

https://github.com/davidjbradshaw/iframe-resizer#iframe-page-options

Documentation could be a bit clearer to link up what you need to do on both ends.

[kmgdevelopment]

@davidjbradshaw Can you give an example? I'm not clear on how this is supposed to work and the example page doesn't include any parent events. I tried:

<iframe src="https://www.domain.tld" width="100%" height="500" type="text/html" frameborder="0" allowTransparency="true" id="my-iframe">

<script>
    var $iframe = $('#my-iframe');

    $iframe.iFrameResize();

    $iframe.sendMessage('hello world', 'https://www.origin.tld');
</script>

But got the error

Uncaught TypeError: $(...).sendMessage is not a function

[kmgdevelopment]

Drilling down on this more and I'm able to see the iFrameResizer object in the jQuery object:

But trying to access the object returns undefined

console.log( $('#pardot-form')[0].iFrameResizer );

I dunno, I'm just kind of flailing here at this point.

[kmgdevelopment]

OK I was able to get this working with jQuery. Firstly I was still running v3, so upgrading to v4 helped.

For anyone looking at this later, here's my code for adding a class to a child iframe's body:

Parent Page

$('#pardot-iframe').iFrameResize({
  checkOrigin: ['https://www.childiframe.tld'],
  onInit: function(iframe) {
    iframe.iFrameResizer.sendMessage(
        '{"bodyClass": "helloworld"}', 
        ['https://www.parentpage.tld']
    ); 
  }
});

Child iframe

window.iFrameResizer = {
  onMessage: function(message){ 
    var messageData = JSON.parse(message);

    if( messageData.bodyClass.length ) {
      $('body').addClass( messageData.bodyClass );
    }
  }
}

[davidjbradshaw]

Nice example

[friek108]

Actually, sometimes you need to get the let's say jQuery element after the load.. to do that you would do something like:

$("#iFrameResizer0").prop('iFrameResizer').resize()