Cross domain iframe resizer using postMessage

Question

I've read all the cross domain iframe posts here (my thanks to all of you!) and elsewhere.

The postMessage script at cross-domain iframe resizer? works beautifully in Firefox 5 and up. It resizes the iframe every time a page is clicked within the iframe perfectly.

But it doesn't resize at all in IE (7 8 or 9) on my computer. I checked the security settings and the one in IE for access across domains was checked to enable.

Does postMessage not work in IE? - Or is there something else that needs to be added? thanks

score 4 · Answer 1 · edited Sep 30 '16 at 04:46

It's a great script from thomax - it also works on so you can use iframes on mobile - iphones and android

For IE7 and IE8, you have to use window.attachEvent instead of window.addEventListener It should also be onmessage instead of message (see below) ps you also need to do the same on the server with the content posting its size

<script type="text/javascript">
if (window.addEventListener)
{
  function resizeCrossDomainIframe(id) {
    var iframe = document.getElementById(id);
    window.addEventListener('message', function(event) {
      var height = parseInt(event.data) + 32; 
      iframe.height = height + "px";
    }, false);
  }
}
else if (window.attachEvent)
{
  function resizeCrossDomainIframe(id) {
    var iframe = document.getElementById(id);
    window.attachEvent('onmessage', function(event) {
      var height = parseInt(event.data) + 32; 
      iframe.height = height + "px";
    }, false);
  }
}
</script>

score 2 · Answer 2 · answered Aug 02 '13 at 03:22

Using Peter's code and some ideas from here, you could separate out the compatibility from the executable code, and add some cross-site validation.

<script type="text/javascript">
  // Create browser compatible event handler.
  var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
  var eventer = window[eventMethod];
  var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

  // Listen for a message from the iframe.
  eventer(messageEvent, function(e) {
    if (e.origin !== 'http://yourdomain.com' || isNaN(e.data)) return;
    document.getElementById('iframe_id_goes_here').style.height = e.data + 'px';
  }, false);
</script>

Also, for completeness, you could use the following code within the iframe whenever you want to trigger the resize.

parent.postMessage(document.body.offsetHeight, '*');

In my case, the `'*'` was the solving point! Instead of changing it from `localhost` to `whatever-it-is.com`, I put `*` for development purpose. Tnks! — Marco Arruda, Aug 28 '20 at 21:16

score 1 · Answer 3 · answered Sep 10 '12 at 09:34

You can use the implementation of Ben Alman. Here is an example of cross-domain communication, including an example of iframe resize.

http://benalman.com/code/projects/jquery-postmessage/examples/iframe/

According to the documentation, it works on Internet Explorer 6-8, Firefox 3, Safari 3-4, Chrome, Opera 9.

score 1 · Answer 4 · answered Feb 02 '14 at 14:53

Having looked a lots of different solutions to this I ended up writing a simple jQuery plugin to take a account of a number of different use cases. As I needed a solution that supported multiple user generated iFrames on a portal page, supported browser resizes and could cope with the host page JavaScript loading after the iFrame. I also added support for sizing to width and a callback function and allow the override of the body.margin, as you will likely want to have this set to zero.

https://github.com/davidjbradshaw/iframe-resizer

The host page users jQuery, the iframe code is just a little self-contained JavaScript, so that it's a good guest on other people pages.

The jQuery is then initialised on the host page and has the following available options. More details on what these do on the GitHub page.

$('iframe').iFrameSizer({
    log: false,
    contentWindowBodyMargin:8,
    doHeight:true,
    doWidth:false,
    enablePublicMethods:false,
    interval:33,
    autoResize: true,
    callback:function(messageData){
        $('p#callback').html('<b>Frame ID:</b> ' + messageData.iframe.id + 
                            ' <b>Height:</b> ' + messageData.height + 
                            ' <b>Width:</b> ' + messageData.width +
                            ' <b>Event type:</b> ' + messageData.type);
    }
});

If you set enablePublicMethods, it gives you access in the iframe to manually set the iFrame size and even remove the iframe from the host page.

Cross domain iframe resizer using postMessage

4 Answers4

Linked