javascriptjqueryhtmliframeiframe-resizer

iFrame Resizer increases height of iFrame to infinity


I do have a very basic setup:

//index.js with iFrame Resizer, included frame has contentWindow api loaded

$(document).ready(function() {
  $('#odbFrame').iFrameResize({
    resizeFrom: 'child',
    checkOrigin: 'false'
  });
});
.container-fluid {
     padding: 0 !important;
}

#odbFrame {
    border: 0;
    width: 100%;
    height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- bootstrap -->
<div class="container-fluid">
    <iframe src="{$odbUrl|esc}" id="odbFrame"></iframe>
</div>
<script src="index.js"></script>

But when it loads, the page is first resized correctly but then grows to infinity.

This is the log:

[iFrameSizer][odbFrame] Parsed 1407 HTML elements  
[iFrameSizer][odbFrame] Element position calculated in 183ms  
[iFrameSizer][odbFrame] Event throttle increased to 366ms  
[iFrameSizer][odbFrame] Trigger event lock on  
[iFrameSizer][odbFrame] Sending message to host page  (odbFrame:1441:1853:mutationObserver)  
[iFrameSizer][Host page: odbFrame] Received  
[iFrameSizer]odbFrame:1441:1853:mutationObserver  
[iFrameSizer][Host page: odbFrame] Checking connection is from: <$odbUrl>  
[iFrameSizer][Host page: odbFrame] Checking height is in range 0-Infinity  
[iFrameSizer][Host page: odbFrame] Checking width is in range 0-Infinity  
[iFrameSizer][Host page: odbFrame] Requesting animation frame  
[iFrameSizer][Host page: odbFrame] IFrame (odbFrame) height set to 1441px  
[iFrameSizer][odbFrame] Trigger event cancelled: resize  
[iFrameSizer][odbFrame] Trigger event: mutationObserver: [object HTMLDivElement] childList  
[iFrameSizer][odbFrame] Trigger event lock off  
[iFrameSizer][odbFrame] --  

And this is repeated forever (well the height keeps on growing). A temporary fix is to use maxHeight but that should not be needed.

I have tried:

  1. All of the calculateHeightMethods
  2. Externally trigger the resize method

Both failed!

On other pages of the same URL (both host and child), this is not the case!


Solution

  • The Problem was: A footer was placed using absolute coordinates which resulted in a calculation error. The footer was removed and now it works