At the moment we are only using the iframe type of Magnific Popup (jQuery plugin). However the popup doesn't resize it's height when the content of the iframe grows/shrinks dynamically. I think for inline content resizing seems to work though.

I searched the documentation and the web but could not find any solution.

Therefore I was looking for third party solutions to auto resize (cross domain) iframes on content change. Best I found so far (looking for a simple solution) are:

jQuery resize event (using a Fork because the original doesn't seem to be maintained)
to be able to bind a resize event in bination with:

jQuery postMessage (using a Fork for same reason)
to implement cross-domain munication between iframe and parent (because of same origin policy).

(Can't post links to forks since this is my first question and I'm only allowed to post two links... )

I got those working for a simple test iframe, now I want to implement this into Magnific Popup.

Just now I stumbeld upon a resize event in the documentation, which is already built into MFP: "resize event triggers only when height is changed or layout forced". However it doesnt fire when I display more/less text in the iframe based on a select input (only test so far but thats what I need at the moment).

So before implementing all those plugins I thought maybe I ask if someone already has a working solution for this or if I just overlooked a built in function/didn't use it right. I'm pretty new to JavaScript.

Thanks in advance

At the moment we are only using the iframe type of Magnific Popup (jQuery plugin). However the popup doesn't resize it's height when the content of the iframe grows/shrinks dynamically. I think for inline content resizing seems to work though.

I searched the documentation and the web but could not find any solution.

Therefore I was looking for third party solutions to auto resize (cross domain) iframes on content change. Best I found so far (looking for a simple solution) are:

jQuery resize event (using a Fork because the original doesn't seem to be maintained)
to be able to bind a resize event in bination with:

jQuery postMessage (using a Fork for same reason)
to implement cross-domain munication between iframe and parent (because of same origin policy).

(Can't post links to forks since this is my first question and I'm only allowed to post two links... )

I got those working for a simple test iframe, now I want to implement this into Magnific Popup.

Just now I stumbeld upon a resize event in the documentation, which is already built into MFP: "resize event triggers only when height is changed or layout forced". However it doesnt fire when I display more/less text in the iframe based on a select input (only test so far but thats what I need at the moment).

So before implementing all those plugins I thought maybe I ask if someone already has a working solution for this or if I just overlooked a built in function/didn't use it right. I'm pretty new to JavaScript.

Thanks in advance

• javascript
• jquery
• iframe
• autoresize
• magnific-popup

3 Answers 3

You can use: https://github./davidjbradshaw/iframe-resizer

This requires that you add a script to the page loading the <iframe>:

<script type="text/javascript" src="../iframeResizer.min.js"></script> 

As well as to the external page you are trying to load Inside of the <iframe>:

<script type="text/javascript" src="../iframeResizer.contentWindow.min.js"></script>

Note: If you are trying to load an external domain which isn't yours, this may not work for you - because you must have a script added in both places (sorry), but this WILL work if you are trying to load an HTTPS page inside a NON HTTPS page.

I also define my own markup for the magnific popup in the script.

      $(document).ready(function() {
        $('.open-popup').magnificPopup({
            items: {src: '/file.html'},
            type: 'iframe',
              iframe: {
                 markup: '<div class="iframe-popup">'+
                            '<iframe class="mfp-iframe" frameborder="0" scrolling="no" allowtransparency="true" allowfullscreen></iframe>'+
                            '<div class="mfp-close"></div>'+
                          '</div>'
              },
        });
      });

You can resize the width of the iframe pretty easily with CSS to 100% of the parent window... as long as you have a max-width set on your parent (.iframe-popup in the example above).

One major thing I figured out that magnific actually has a resize callback included in its code:

    callbacks: {
        resize: function() {
            $('iframe').iFrameResize([{
                enablePublicMethods: true,
                checkOrigin: false
            }]);
         }

That's it. Works for me every time.

Since there doesn't seem to be a built in solution for auto resizing (non-video) iframes in Magnific Popup I built my own solution using external plugins as mentioned above.

To check if the iframe content height has changed I used this Fork of jQuery resize event plugin, which is patible with the current jQuery version 1.11.1.

To send the new height from iframe to parent window (cross domain patible) I ended up using this jQuery postMessage Plugin, which seems to be well maintained and works in IE6+.

Also I switched to use "type: inline" of Magnific Popup to display the iframes, since "type: iframe" seems to be specificaly styled for iframe video embedding like YouTube videos, which made it hard for me to style the popup height in a simple way.

There might be a cleaner/straight forward solution, that's why I didn't get into too much details. Another reason is that I used quite a few lines of code for implementation into MFP and since I'm new to JS it might not be the best code ;) But since there was no answer yet I will mark this as accepted answer for now because it works.

Best solution of course would be if Magnific Popup would have a built in solution (feature request!).

I was looking for the solution to this and only found a simple solution for non-cross domain munication without using a plugin. (I haven't tested cross-domain, but I can't say it won't work).

There's a way for iframes to inherently municate with their parent's window. You can resize the parent via this code on your iframe

<script>
    $(document).ready(function() {

        // access the iframe's parent in order to resize
        var contentHeight           = $('.your-iframe-wrapper').height(),
            parentBody              = window.parent.document.body;          

        $('iframe', parentBody).animate({
            height: contentHeight + 100,
            maxHeight : "100%"
        }, 200)     

    });

</script>

When your iFrame loads, it should run this script, and access the iFrame's parent window and resize it from there. Hope this helps someone out.