多页 iframe 与 onload 高度答案

【问题标题】：Multiple pages iframe with onload for height多页 iframe 与 onload 高度
【发布时间】：2013-11-19 19:09:46
【问题描述】：

我有一个包含多个页面的脚本的 iframe，我想根据内容高度自动调整此 iframe 的高度。当我加载第一页时它可以正常工作，但是当我切换到另一个页面时，会再次调用该函数，但高度是相同的，即使每个页面上的内容高度不同。

javascript函数：

function autoResize(id){
  var newheight;

  if(document.getElementById){
      newheight=document.getElementById(id).contentWindow.document.body.scrollHeight;
  }

  document.getElementById(id).height= (newheight) + "px";
}

还有我的 iframe：

<iframe id="iframe" src="myScript" width="950px" onLoad="autoResize('iframe');"></iframe>

当我在使用contentWindow.document.body.scrollHeight 设置后添加alert(newheight) 时，我会在每一页上收到警报，但高度始终相同。
还有其他方法可以获取当前 iframe 内容高度吗？

【问题讨论】：

标签： javascript iframe

【解决方案1】：

试试这个：

function autoResize(id){
    var n1=id.contentWindow.document.body.scrollHeight;
    document.getElementById(id).style.height = n1 + 'px';
}

【讨论】：

@oliboon 你是通过 iframe 中的链接更改页面吗？
每个页面都使用相同的php脚本，页面之间的唯一区别是SQL查询中的LIMIT。
你指的是 iframe 内的页面吗？
是的。父窗口没有变化，只是 iframe 内容发生变化。
您正在使用 onload 事件处理程序。因此，只有在加载包含 iframe 的页面时才会调用 javascript 函数。如果 iframe 内的内容发生变化，则不会调用该函数。

【解决方案2】：

你能试试这个功能吗，在每次 iframe 加载时传递iframe id，iframe id 应该是唯一的

    function autoResize(frameId){
        var F = document.getElementById(frameId);
        if(F.contentDocument) {
            F.height = F.contentDocument.documentElement.scrollHeight; //FF 3.0.11, Opera 9.63, and Chrome
        } else {
            F.height = F.contentWindow.document.body.scrollHeight; //IE6, IE7 and Chrome    
        }
    }

【讨论】：

我得到了同样的结果。第一页高度正确显示，但是当我更改页面时，高度保持不变。
你是如何改变框架中的页面的？
每个页面都使用相同的php脚本，页面之间的唯一区别是SQL查询中的LIMIT。
您是否动态更改了 iframe id？如果 php 生成 iframe 的意思，则需要生成唯一的 iframe id 并提供给autoResize() 函数
iframe id 不会改变。 iframe 不是 PHP 生成的，iframe 的内容是。