iframe自适应高度和滚动条颜色设置.docVIP

iframe自适应高度 Demo页面：主页面 iframe_a.html ，被包含页面 iframe_b.htm 和 iframe_c.html 下面开始讲： 通过Google搜索iframe 自适应高度，结果5W多条，搜索iframe 高度自适应，结果2W多条。我翻了前面的几十条，刨去大量的转载，有那么三五篇是原创的。而这几篇原创里面，基本上只谈到如何自适应静的东西，就是没有考虑到JS操作DOM之后，如何做动态同步的问题。另外，在兼容性方面，也研究的不彻底。 这篇文章，希望在这两个方面再做一些深入。 可能有人还没接触到这个问题过，先说明一下，什么是自适应高度吧。所谓iframe自适应高度，就是，基于界面美观和交互的考虑，隐藏了 iframe的border和scrollbar，让人看不出它是个iframe。如果iframe始终调用同一个固定高度的页面，我们直接写死 iframe高度就可以了。而如果iframe要切换页面，或者被包含页面要做DOM动态操作，这时候，就需要程序去同步iframe高度和被包含页的实 际高度了。 顺便说下，iframe在迫不得已的时候才去用，它会给前端开发带来太多的麻烦。 传统做法大致有两个：方法一，在每个被包含页在本身内容加载完毕之后，执行JS取得本页面的高度，然后去同步父页面的iframe高度。方法二，在主页面iframe的onload事件中执行JS，去取得被包含页的高度内容，然后去同步高度。在代码维护角度考虑，方法二是优于方法一的，因为方法一，每个被包含页都要去引入一段相同的代码来做这个事情，创建了好多副本。 两个方法都只处理了静的东西，就是只在内容加载的时候执行，如果JS去操作DOM引起的高度变化，都不太方便。 如果在主窗口做一个Interval，不停的来获取被包含页的高度，然后做同步，是不是即方便，又解决了JS操作DOM的问题了呢？答案是肯定的。 Demo页面：主页面 iframe_a.html ，被包含页面 iframe_b.htm 和 iframe_c.html 主页面代码示例： iframe id=frame_content src=iframe_b.html scrolling=no frameborder=0/iframescript type=text/javascript function reinitIframe(){ var iframe = document.getElementById(frame_content); try{ iframe.height = iframe.contentWindow.document.documentElement.scrollHeight; }catch (ex){} } window.setInterval(reinitIframe(), 200); /script 一直执行，效率会不会有问题？我做了测试，同时开5个窗口（IE6、IE7、FF、Opera、Safari）执行这个代码，不会对CPU有什么影响，甚至调整到2ms，也没影响（基本维持在0%占用率）。 下面谈谈各浏览器的兼容性问题，如何获取到正确的高度，主要是对body.scrollHeight和 documentElement.scrollHeight两个值得比较。注意本文用的是这个doctype，不同的doctype应该不会影响结果，但 是假如你的页面没有申明doctype，那还是先去加一个吧。 !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN /TR/html4/strict.dtd 在主页面追加以下测试代码，以输出这两个值，代码示例： divbutton onclick=checkHeight()Check Height/button/divscript type=text/javascript function checkHeight() { var iframe = document.getElementById(frame_content); var bHeight = iframe.contentWindow.document.body.scrollHeight; var dHeight = iframe.contentWindow.document.documentElement.scrollHeight; alert(bHeight: + bHeight + , dHeight: + dHeight); } /script 被加载页面，可以切换一个绝对定位的层，来使页面高度动态改变。如果层展开，则会撑高页面高度。代码示例： divbutton onclick=toggleOverlay()Toggle