动态调整iframe大小 [英] Dynamically Resizing an Iframe

问题描述

我可以看到这个问题已经被问了几次，但是没有一个提出的解决方案似乎对我正在构建的站点有效，所以我正在重新打开这个线程。我正在尝试根据其内容的高度来定义一个iframe。包含iframe的页面和源页面都存在于同一个域上。

我已经在以下每个线程中尝试了提出的解决方案：

• 根据内容高度调整iframe的高度


• 根据内容调整iframe的大小

我认为上述解决方案无法正常工作当引用body.clientHeight时，浏览器实际上并没有确定文档的高度。

这是我使用的代码：

  var ifmBlue = document.getElementById（ifmBlue）; 
 ifmBlue.onload = resizeIframe; 
 
函数resizeIframe（）
 {
 var ifmBlue = document.getElementById（ifmBluePill）; 
 var ifmDiv = ifmBlue.contentDocument.getElementById（main）; 
 var height = ifmDiv.clientHeight; 
 ifmBlue.style.height =（ifmBlue.contentDocument.body.scrollHeight || ifmBlue.contentDocument.body.offsetHeight || ifmBlue.contentDocument.body.parentNode.clientHeight || height || 500）+ 5 +'px ; 
} 
  

如果我使用fire debug调试脚本，那么iframe的客户机高度。 contentDocument的主div是0.另外，body.offsetHieght，& body.scrollHeight为0.但是，在脚本运行完毕后，如果我检查了HTML iframe元素的DOM（使用fire debug），我可以看到body的clientHeight是456，内部的div的clientHeight是742.这导致我相信当触发iframe.onload时，这些值尚未设置。所以，按照上面的一个线程，我把代码移动到了iframe的源代码页面的body.onload事件处理程序中。

非常感谢您提供的任何帮助。

谢谢， p>

CJ

解决方案

DynamicDrive具有这样一个脚本，我认为这是你要求的。

现在还有一个较新版本。

---

2011更新：

我会强烈地推荐使用AJAX，这个，特别是考虑到一个动态调整大小的iframe只能在同一个域上工作。

即使如此，这有点iffy，所以如果你绝对必须在标准页面加载上使用AJAX ，你真的，真的应该使用诸如 history.pushState 的东西（并且将标准页面加载为浏览器的后备不支持它）。有一个jQuery插件来处理这个东西，由GitHubber编写，名为 pjax ，其中他们仅使用 进行回购导航。

I can see that this question has been asked several times, but none of the proposed solutions seem to work for the site I am building, so I am reopening the thread. I am attempting to size an iframe based on the height of it's content. Both the page that contains the iframe and it's source page exist on the same domain.

I have tried the proposed solutions in each of the following threads:

• Resize iframe height according to content height in it
• Resizing an iframe based on content

I believe that the solutions above are not working because of when the reference to body.clientHeight is made, the browser has not actually determined the height of the document.

Here is the code I am using:

    var ifmBlue = document.getElementById("ifmBlue");
    ifmBlue.onload = resizeIframe;

    function resizeIframe()
    {
        var ifmBlue = document.getElementById("ifmBluePill");
        var ifmDiv = ifmBlue.contentDocument.getElementById("main");
        var height = ifmDiv.clientHeight;
        ifmBlue.style.height = (ifmBlue.contentDocument.body.scrollHeight || ifmBlue.contentDocument.body.offsetHeight || ifmBlue.contentDocument.body.parentNode.clientHeight || height ||  500) + 5 + 'px';
    }

If I debug the script using fire debug, the client height of the iframe.contentDocument's main div is 0. Additionally, body.offsetHieght, & body.scrollHeight are 0. However, after the script is finished running, if I inspect the DOM of the HTML iframe element (using fire debug) I can see that the body's clientHeight is 456 and the inner div's clientHeight is 742. This leads me to believe that these values are not yet set when iframe.onload is fired. So, per one of the threads above, I moved the code into the body.onload event handler of the iframe's source page. This solution also did not work.

Any help you can provide is much appreciated.

Thanks,

CJ

解决方案

DynamicDrive has such a script, which I think does what you're asking for.

There's also a newer version now.

---

2011 update:

I would strongly recommend using AJAX over something like this, especially considering that a dynamically resizing iframe only works across the same domain.

Even so, it's a bit iffy, so if you absolutely must use AJAX over standard page loading, you really, really should use things like history.pushState (and have standard page loading as a fallback for browsers that don't support it). There's a jQuery plugin which handles this stuff for you, written by a GitHubber, called pjax, which they use only for repo navigation.

这篇关于动态调整iframe大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！