Question

我在调整iframe大小以适应框架页面内的内容时遇到问题。我使用了一个建议，我在这里动态调整帧的大小。

在我的框架中，我有

<body onload='parent.resizeIframe(getDocHeight())'>

function getDocHeight() {
var D = document;
alert(D.URL);
return Math.max(
    Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
    Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
    Math.max(D.body.clientHeight, D.documentElement.clientHeight)
);

}

在包含iframe的页面中，我有这个

function resizeIframe(newHeight) {
  var showsFrame = document.getElementById('frm');
  showsFrame.style.height = parseInt(newHeight) +'px';
}

每个框架的页面都会正确调用该功能，但出于某种原因，“新高度”会被调整。传递的参数是保持最大的高度值。例如，如果我有2个框架的页面，其中一个页面的滚动高度为300px，另一个页面的页面滚动高度为500px。当我第一次点击我的链接加载300px页面时它工作正常，但如果我点击500px页面的链接，然后尝试返回300px页面，＆＃39; newHeight＆＃39;仍然是500.任何想法？ TIA

Answer 1

我发现我遇到的问题是遇到同样事情的其他人。因为我的框架页面没有太多内容，所以scrollHeight报告整个文档的长度，而不是切断我的内容停止的位置。我没有尝试计算scrollHeight，而只是寻找offsetHeight，这是我正在寻找的正确高度。 Firebug是一个很好的工具，可以检查每个页面的DOM并查看每个属性的值，而无需编写调试消息。我把这一行放在每一页的页面

中

<body onload='parent.resizeIframe(getDocHeight())'>

并在一个单独的js文件中，我有这个代码来计算高度。

function getDocHeight() {
var D = document;
return Math.max(
   Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
);

Answer 2

尝试使用JQuery

         function resizeIframe(newHeight) {
              $('#iframeId').attr('height',newHeight); 
                               or
              $("#frameId").height(newHeight);
          }

javascript调整iframe高度动态问题

2 个答案: