Calling a function when a scrollbar appears in an IFrame
I have an IFrame, in the onload event, I set the frame height:
function resizeFrame() { $("#iframeID").height($("#iframeID").contents().find("body").outerHeight(true)); }
Problem:
When the frame content is zoomed in without 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 seem to find a solution for IE 7 + 8
Anyone got an idea?
+2
a source to share
2 answers
Unfortunately, applying it to the body of the iframe 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 now my code (solution):
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" />
0
a source to share
You can probably go back to the jQuery resize () event handler applied to the body of the iframe. It is designed to work only with the window element, but it works with any element in IE .
+1
a source to share