IFrame Resizer not resizing

Question

I'm working on this page here: http://factor1hosting.com/~dnaz/wordpress/certifications/

And I am trying to pull in a cross domain iframe.

I am using @DavidJBradshaw's iFrame Resizer to achieve this. However, I am not getting the iframe to work correctly.

I can use just the plain javascript init:

<script>iFrameResize({log:true})</script>

And when I use this I do get the log but it does not resize. I've also tried the jQuery method:

$('iframe').iFrameResize( [{log: true}] );

And don't get the log or the iframe resized. I also tried wrapping it in a document ready and that doesn't achieve it either.

Anyone have any thoughts or ideas as to why this isn't firing correctly? My console isn't throwing any JS errors... Thanks!

EDIT: here is an example of how I am currently setup on the HTML side.

<iframe src="http://phpstack-9420-21004-48731.cloudwaysapps.com/onlinecert/certification/login" width="100%" scrolling="no"></iframe>
                <script>
                    jQuery(document).ready(function () {
                        jQuery('iframe').iFrameResize( [{log:true}] );
                    });
                </script>

EDIT 2: Here is my console log when it does fire, and it's setting the iframe to 150px even though the content extends longer then that.

[iFrameSizer][Host page] Added missing iframe ID: iFrameResizer0 (http://phpstack-9420-21004-48731.cloudwaysapps.com/onlinecert/certification/login)
iframeResizer.js:97 
[iFrameSizer][Host page] IFrame scrolling disabled for iFrameResizer0
iframeResizer.js:97 
[iFrameSizer][Host page][init] Sending msg to iframe (iFrameResizer0:8:false:true:32:true:true:null:offset:null:null:0:false:parent)
iframeResizer.js:97 
[iFrameSizer][Host page][iFrame.onload] Sending msg to iframe (iFrameResizer0:8:false:true:32:true:true:null:offset:null:null:0:false:parent)
iframeResizer.contentWindow.js:62 
[iFrameSizer][iFrameResizer0] HTML & body height set to "auto"
iframeResizer.contentWindow.js:62 
[iFrameSizer][iFrameResizer0] Enable public methods
iframeResizer.contentWindow.js:62 
[iFrameSizer][iFrameResizer0] Added event listener: Animation Start
iframeResizer.contentWindow.js:62 
[iFrameSizer][iFrameResizer0] Added event listener: Animation Iteration
iframeResizer.contentWindow.js:62 
[iFrameSizer][iFrameResizer0] Added event listener: Animation End
iframeResizer.contentWindow.js:62 .
[iFrameSizer][iFrameResizer0] Added event listener: Device Orientation Change
iframeResizer.contentWindow.js:62 
[iFrameSizer][iFrameResizer0] Added event listener: Transition End
iframeResizer.contentWindow.js:62 
[iFrameSizer][iFrameResizer0] Added event listener: Window Clicked
iframeResizer.contentWindow.js:62 
[iFrameSizer][iFrameResizer0] Enable MutationObserver
iframeResizer.contentWindow.js:62 
[iFrameSizer][iFrameResizer0] In page linking not enabled
iframeResizer.contentWindow.js:62 
[iFrameSizer][iFrameResizer0] Trigger event lock on
iframeResizer.contentWindow.js:62 
[iFrameSizer][iFrameResizer0] Sending message to host page (iFrameResizer0:150:703:init)
iframeResizer.js:97 
[iFrameSizer][Host page] Received: 
[iFrameSizer]iFrameResizer0:150:703:init
iframeResizer.js:97 [iFrameSizer][Host page] Checking connection is from: http://phpstack-9420-21004-48731.cloudwaysapps.com
iframeResizer.js:97 
[iFrameSizer][Host page] Checking height is in range 0-Infinity
iframeResizer.js:97 
[iFrameSizer][Host page] Checking width is in range 0-Infinity
iframeResizer.js:97 
[iFrameSizer][Host page] Requesting animation frame
iframeResizer.js:97 
[iFrameSizer][Host page] IFrame (iFrameResizer0) height set to 150px
iframeResizer.contentWindow.js:62 
[iFrameSizer][iFrameResizer0] Trigger event lock off
iframeResizer.contentWindow.js:62 
[iFrameSizer][iFrameResizer0] --

Answer 1

Got it!

The iframe body height wasn't calculating correctly, so I changed how it calculates what the iframe height should be. I am using 'lowestElement' to achieve this and it works great.

iFrameResize({
    log                     : true,                  // Enable console logging
    enablePublicMethods     : true,                  // Enable methods within iframe hosted page
    heightCalculationMethod : 'lowestElement',
});

From the GitHub repo: lowestElement Loops though every element in the the DOM and finds the lowest bottom point

Answer 2

I got into the exact same problem. And, the issue was really surprising.

iFrameResize([{log: true}], yourIframe); will not resize.

But, iFrameResize({log: true}, yourIframe); will do the resize perfectly.
Please remove array [{log: true}] from options and keep only object {log: true}.

This is confusing because I copied the init code from the GitHub page which says: const iframes = iFrameResize( [{options}], [css selector] || [iframe] ); :D

Seems like OP was also doing the same mistake. Hope it helps someone.