Calling a function when a scrollbar appears in an IFrame

Question

I got an IFrame, in the onload event i set the height of the frame:

function resizeFrame() { $("#iframeID").height($("#iframeID").contents().find("body").outerHeight(true)); }

Problem is:
When the content of the frame is increasing without a postback (javascript or Async Postback with Ajax), a scrollbar appears.
I found a solution for Firefox:

document.getElementById("iframeID").contentWindow.addEventListener("overflow", resizeFrame, false);

But i can't find a solution for IE 7+8
Anyone got an idea?

Answer 1

Probably you can fall back on the jQuery's resize() event handler, applied on the iframe's body. It is meant to work with the window element only, but seems to work with any element on IE.

Answer 2

Sadly applying it to the iframe's body didn't work.
But i found a plugin where you can apply it to any element on the site: http://benalman.com/projects/jquery-resize-plugin/

So that's my code(solution) now:

function initFrame() 
{      
  resizeAppFrame();

  if (navigator.userAgent.indexOf("MSIE") > 0)                          
    $(function() { $(appFrame.document.body).resize(resizeAppFrame) }) //IE
  else
    document.getElementById("applicationFrame").contentWindow.addEventListener("overflow", resizeAppFrame, false);  //FireFox
}
function resizeAppFrame()
{
  $("#iFrameID").height($("#iFrameID").contents().find("body").outerHeight(true));
}

...

<iframe name="appFrame" id="iFrameID" onload="initFrame();" frameborder="0" src="TestFrame.aspx" />