父级隐藏时子级高度获取

今天同事碰到了一个在iframe中自适应高度的问题，描述如下：

有2个iframe 一个iframe是父级是隐藏的一个默认是显示的（其实就是个tab选项卡示例，tab的内容是iframe载入的），这个时候这2个iframe要自适应高度，但是第二个默认隐藏的iframe却怎么都不会获取到高度。

因为如果父容器设为隐藏，子容器宽高设为自适应（这里iframe默认肯定是自适应的）这个时候js肯定是无法取到这个子元素的高度的，有人说jquery可以，确实jquery是采用的当容器是隐藏的，它会先复制一份这个元素，然后将其display设为block，position设成absolute，visibility设成hidden，然后把这个复制的元素放到原元素相同的位置，即父元素是同一个，这样能确保样式表能够正常应用到这个复制的元素，设置position和visibility是为了不修改原来的文档流导致页面重新渲染闪烁错乱，然后通过js获取复制元素的宽高，最后再将这个元素移除才实现的，所以基本我们取一个隐藏元素高度的时候jquery是能做到，不过如果这个元素父级也是隐藏那就真是无可奈何了。

所以对此我的解决办法是房子jquery的原理，在页面载入的时候用js先将这个隐藏元素的display设置为block，然后应用visibility设置隐藏，同时将它的position设置为absolute这样就不会影响文档流了，而且默认它是隐藏的肉眼也不会发现这个小的变化，这个时候我们在用js或jquery去获取会发现能获取到它的高度，然后将这个高度重置给iframe（元素）接着在讲它的csstext置空（也就是还原我们之前设置的那一些为了获取高度设置的属性，当然最好的做法是将那一些列样式单独定义成class，然后在完成获取高度后移除这个class）。

ps:在上面标红的position定义会存在问题，因为absolute后iframe这个还个时候获取的宽度将会是iframe包容页和iframe的页面2者宽度的总和，这样的取值是错误的，因此我们需要在iframe中载入的时候设置不要设置position等取值完毕后在设置同事给iframe定义高，这样就可以避免取值错误和影响布局的问题了。

事例如下，这我是用jquery写的，js一样，因为是事例所以写的很粗糙，这可以继续优化：

$(function(){var wrapper = $(window.parent.document).find('.list-bx').eq(1);//包含iframe的divwrapper.css({"display":"block","visibility":"hidden"})//定义父级显示然后在利用visibility隐藏避免获取不到高var elw = $(window.parent.document).find('#iframe_2');//取得iframeelw.removeAttr('height');//移除iframe的默认高度定义属性var h2 = $(document).height();//获取当前iframe的高度wrapper.css("position","absolute");//然后将父级改为绝对定位脱离文档流，注这里之所以是放在iframe定义前面是为了避免在没有定义position前影响文档流elw.attr('height',h2);//重新定义iframe高度wrapper.css({"display":"none","position":"relative","visibility":"visible"})//移除之前定义属性})()

参考文档：http://stackoverflow.com/questions/3632120/jquery-height-width-and-displaynone