Height not changing when window is resized (stays at shrink state and not expanding)

A parent page, let’s say, www.maingames.com has an iframe page happywheelsgames.com and loads perfectly using this plugin. The frame page has a modal inside, and changes the body height in every click of the anchor links inside (just doing show and hide here displaying lists and grid of data).

However, the problem occurred when the user loads the site, in minimized window (not full screen), then opens the modal (and also after they closed it), and maximizes the browser window, it stays on its “shrink” state and not expanding the whole iframe like it used to.

Here’s my code:

var windowHeight = window.innerHeight || document.documentElement.clientHeight;
var headerHeight = $(".header").outerHeight();
var footerHeight = $(".footer").outerHeight();
var contentHeight = windowHeight - (headerHeight + footerHeight);

$("iframe.gamesData").on("load", function() {
  $(this).iFrameResize({
    heightCalculationMethod: 'max',
    minHeight: contentHeight
  });
});

I also tried using lowestElement and taggedElement but it’s not resizing even on the loading of the page. I also tried inserting another iFrameResize function inside a “$(window).on(“resize”, function ()” but it returns a warning saying something like “iFrame already setup. Ignore [FrameName]”, and not actually resizing. I believe there’s already a “resize” function inside the plugin, pls correct me if I’m wrong.

Any suggestion or piece of advice is very much appreciated.

Thanks!

[ltkhuong7]

I am sorry, your IFrameResizer has been fine. I have found out a problem from my javascript. It conflicts with yours.

[davidjbradshaw]

If you can create a simple test case I will have a look. Expect their might be some race condition happening.