本文实例讲述了JS实现iframe自适应高度的方法。
JS自适应高度，其实就是设置iframe的高度，使其等于内嵌网页的高度，从而看不出来滚动条和嵌套痕迹。对于用户体验和网站美观起着重要作用。 如果内容是固定的，那么我们可以通过CSS来给它直接定义一个高度，同样可以实现上面的需求。当内容是未知或者是变化的时候。这个时候又有几种情况了。
iframe内容未知，高度可预测这个时候，我们可以给它添加一个默认的CSS的min-height值，然后同时使用JavaScript改变高度。常用的兼容代码有：// document.domain = "caibaojian.com";function setIframeHeight(iframe) {if (iframe) {var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;if (iframeWin.document.body) {iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;}}};
window.onload = function () {setIframeHeight(document.getElementById('external-frame'));};演示地址演示一（如果在同个顶级域名下，不同子域名之间互通信息，设置document.domain="caibaojian.com" 只要修改以上的iframe的ID即可了。或者你可以直接在iframe里面写代码，我们一般为了不污染HTML代码，建议使用上面的代码。
演示二多个iframe的情况下演示三针对知道的iframe的ID调用function iframeAutoFit(iframeObj){setTimeout(function(){if(!iframeObj) return;iframeObj.height=(iframeObj.Document?iframeObj.Document.body.scrollHeight:iframeObj.contentDocument.body.offsetHeight);},200)}演示四内容宽度变化的iframe高度自适应演示五打开调试运行窗口可以看到运行。
跨域下的iframe自适应高度跨域的时候，由于js的同源策略，父页面内的js不能获取到iframe页面的高度。需要一个页面来做代理。 方法如下：假设www.a.com下的一个页面a.html要包含www.b.com下的一个页面c.html。 我们使用www.a.com下的另一个页面agent.html来做代理，通过它获取iframe页面的高度，并设定iframe元素的高度。 a.html中包含iframe:在c.html中加入如下代码：最后，agent.html中放入一段js:agent.html从URL中获得宽度值和高度值，并设置iframe的高度和宽度（因为agent.html在www.a.com下，所以操作a.html时不受JavaScript的同源限制）
演示六分享给大家供大家参考，具体如下：
PS:高度自适应应用广泛，本站的很多在线工具也使用了这一技巧，列举如下几个工具供大家参考：JavaScript在线格式化工具(基于beautify.js插件)：
http://tools.jb51.net/code/js_beautify在线颜色选择器工具/RGB颜色查询对照表：
http://tools.jb51.net/color/colorpicker
在线个人所得税计算器：
http://tools.jb51.net/jisuanqi/tax_calc
宋词在线查询：
http://tools.jb51.net/bianmin/songci更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript数组操作技巧总结》、《JavaScript排序算法总结》、《JavaScript遍历算法与技巧总结》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript查找算法技巧总结》及《JavaScript错误与调试技巧总结》希望本文所述对大家JavaScript程序设计有所帮助。
您可能感兴趣的文章:iframe高度自适应及隐藏滚动条的实例详解javascript 中iframe高度自适应（同域）实例详解JS解决iframe之间通信和自适应高度的问题jQuery简单实现iframe的高度根据页面内容自适应的方法JS实现iframe自适应高度的方法(兼容IE与FireFox) iframe实现高度自适应小程序web-view方案