iframe动态大小的问题（未解决）

有一个需求要根据iframe内部的内容大小来动态改变iframe的大小，也就是不想出现iframe滚动条，达到最好的用户体验。

于是写了这样一个看似完美的方法来取得iframe内部内容的尺寸：

var getContentSize = function () {

    var docEl = document.documentElement, body = document.body;

    return {

        width: Math.max(docEl.scrollWidth, body.scrollWidth),

        height: Math.max(docEl.scrollHeight, body.scrollHeight)

    };

};

然后使用setInterval来监视并同步iframe的大小：

setInterval(function () {

    var size = getContentSize();

    iframe.style.width = size.width + 'px';

    iframe.style.height = size.height + 'px';

}, 128);

舒舒服服的用了一段时间，直到悲剧发生了：

悲剧1...当iframe载入的页面中有一些绝对定位的元素，并且元素的位置始终会超出显示范围，也就是有隐藏的部分：

div.test

{

    position:absolute;

    right:-10px;

    bottom:-10px;

}

悲剧2...当iframe载入的页面中有css同时设置了html和body一样的width或height，也就是我们比较常见的css reset：

html,body

{

    height:100%;

    width:100%;

}

悲剧2可能比较不好理解，而且也不是一定会发生，以下是我自己的猜测：html和body标签同时设置了一样的尺寸后，因为body内嵌于html之内，body并有一定的先天的宽度和高度，这样body就始终会超出html一点点，达到了悲剧1的条件（当然了同时设置width/height=auto;是不会有问题的，auto是默认值）。

 

这两个点为什么是悲剧呢？达到以上任意一个悲剧的条件后，每一次setInterval的处理函数执行后，iframe内部的尺寸都是始终不断的增加。。。

正在寻求解决的办法中。。。希望有解决方案的朋友能提供帮助，先谢过了。