文章/答案/技术大牛

发布

社区首页 >问答首页 >javascript调整iframe高度动态发布

问javascript调整iframe高度动态发布
EN

Stack Overflow用户

提问于 2011-05-11 11:18:03

回答 2查看 4.2K关注 0票数 0

我在调整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';
}

该函数被每个框架的页面正确调用，但由于某种原因，传递的'newHeight‘参数保留了最大的高度值。例如，如果我有两个带框架的页面，一个的滚动高度为300px，另一个的滚动高度为500px。当我第一次点击我的链接来加载300px的页面时，它工作得很好，但如果我点击500px页面的链接，然后尝试返回300px页面，'newHeight‘的值仍然是500。有什么想法吗？提亚

javascript

iframe

回答 2

Stack Overflow用户

发布于 2011-05-12 21:26:05

我发现了我为任何其他正在经历同样事情的人所面临的问题。因为我的frame‘s页面没有太多内容，所以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),
);

票数 1

Stack Overflow用户

发布于 2011-05-11 12:45:44

用JQuery试试吧

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/5958853

复制

相似问题

问javascript调整iframe高度动态发布
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问javascript调整iframe高度动态发布EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问javascript调整iframe高度动态发布
EN