Question

我有一个IFrame，在onload事件中我设置了帧的高度：

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

问题是：
如果帧的内容在没有回发的情况下增加（使用Ajax进行javascript或异步回发），则会出现滚动条。
我找到了Firefox的解决方案：

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

但我无法找到IE 7 + 8的解决方案有人有想法吗？

Answer 1

可能你可以回到jQuery的resize（）事件处理程序，应用于iframe的主体。它仅适用于窗口元素，但seems to work with any element on IE。

Answer 2

遗憾地将它应用于iframe的身体不起作用但我找到了一个插件，您可以将其应用于网站上的任何元素：http://benalman.com/projects/jquery-resize-plugin/

现在这就是我的代码（解决方案）：

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" />

当滚动条出现在IFrame中时调用函数

2 个答案: