本文实例讲述了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 src="backtop.html" frameborder="0" scrolling="no" id="external-frame" onload="setIframeHeight(this)"></iframe>

 演示二

 多个iframe的情况下 

<script language="javascript">
//输入你希望根据页面高度自动调整高度的iframe的名称的列表
//用逗号把每个iframe的ID分隔. 例如: ["myframe1", "myframe2"]，可以只有一个窗体，则不用逗号。
//定义iframe的ID
var iframeids=["test"];
//如果用户的浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏，no表示不隐藏
var iframehide="yes";
function dyniframesize()
{
var dyniframe=new Array()
for (i=0; i<iframeids.length; i++)
{
if (document.getElementById)
{
//自动调整iframe高度
dyniframe[dyniframe.length] = document.getElementById(iframeids[i]);
if (dyniframe[i] && !window.opera)
{
dyniframe[i].style.display="block";
if (dyniframe[i].contentDocument && dyniframe[i].contentDocument.body.offsetHeight) //如果用户的浏览器是NetScape
dyniframe[i].height = dyniframe[i].contentDocument.body.offsetHeight;
else if (dyniframe[i].Document && dyniframe[i].Document.body.scrollHeight) //如果用户的浏览器是IE
dyniframe[i].height = dyniframe[i].Document.body.scrollHeight;
}
}
//根据设定的参数来处理不支持iframe的浏览器的显示问题
if ((document.all || document.getElementById) && iframehide=="no")
{
var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i]);
tempobj.style.display="block";
}
}
}
if (window.addEventListener)
window.addEventListener("load", dyniframesize, false);
else if (window.attachEvent)
window.attachEvent("onload", dyniframesize);
else
window.onload=dyniframesize;
</script>

 演示三

针对知道的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 src="backtop.html" frameborder="0" scrolling="no" id="test" onload="this.height=100"></iframe>
<script type="text/javascript">
function reinitIframe(){
var iframe = document.getElementById("test");
try{
var bHeight = iframe.contentWindow.document.body.scrollHeight;
var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
var height = Math.max(bHeight, dHeight);
iframe.height = height;
console.log(height);
}catch (ex){}
}
window.setInterval("reinitIframe()", 200);
</script>

演示五 打开调试运行窗口可以看到运行。

跨域下的iframe自适应高度

跨域的时候，由于js的同源策略，父页面内的js不能获取到iframe页面的高度。需要一个页面来做代理。 方法如下：假设www.a.com下的一个页面a.html要包含www.b.com下的一个页面c.html。 我们使用www.a.com下的另一个页面agent.html来做代理，通过它获取iframe页面的高度，并设定iframe元素的高度。 a.html中包含iframe:

<iframe src="http://www.b.com/c.html" id="Iframe" frameborder="0" scrolling="no" style="border:0px;"></iframe>

在c.html中加入如下代码：

<iframe id="c_iframe"  height="0" width="0"  src="http://www.a.com/agent.html" style="display:none" ></iframe>
<script type="text/javascript">
(function autoHeight(){
var b_width = Math.max(document.body.scrollWidth,document.body.clientWidth);
var b_height = Math.max(document.body.scrollHeight,document.body.clientHeight);
var c_iframe = document.getElementById("c_iframe");
c_iframe.src = c_iframe.src + "#" + b_width + "|" + b_height;  // 这里通过hash传递b.htm的宽高
})();
</script>

最后，agent.html中放入一段js:

<script type="text/javascript">
var b_iframe = window.parent.parent.document.getElementById("Iframe");
var hash_url = window.location.hash;
if(hash_url.indexOf("#")>=0){
var hash_width = hash_url.split("#")[1].split("|")[0]+"px";
var hash_height = hash_url.split("#")[1].split("|")[1]+"px";
b_iframe.style.width = hash_width;
b_iframe.style.height = hash_height;
}
</script>

 agent.html从URL中获得宽度值和高度值，并设置iframe的高度和宽度（因为agent.html在www.a.com下，所以操作a.html时不受JavaScript的同源限制） 演示六 

分享给大家供大家参考，具体如下：

<iframe id="mainFrame" name="mainFrame" src="/zwgk/hsearchview" width="740" frameborder="0" scrolling="no" scrolling="no" frameborder="0" >
</iframe>

<script type="text/javascript" language="javascript">
function reinitIframe(){
 var iframe = document.getElementById("mainFrame");
 try{
 var bHeight = iframe.contentWindow.document.body.scrollHeight;
 var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
 var height = Math.max(bHeight, dHeight);
 iframe.height = height;
 }catch (ex){}
 }
 window.setInterval("reinitIframe()", 100);
</script>

PS:高度自适应应用广泛，本站的很多在线工具也使用了这一技巧，列举如下几个工具供大家参考：

JavaScript在线格式化工具(基于beautify.js插件)：
http://tools./code/js_beautify

在线颜色选择器工具/RGB颜色查询对照表：
http://tools./color/colorpicker

在线个人所得税计算器：
http://tools./jisuanqi/tax_calc

宋词在线查询：
http://tools./bianmin/songci

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript数组操作技巧总结》、《JavaScript排序算法总结》、《JavaScript遍历算法与技巧总结》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript查找算法技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

# JS  # iframe  # 自适应  # 高度  # iframe高度自适应及隐藏滚动条的实例详解  # javascript 中iframe高度自适应（同域）实例详解  # JS解决iframe之间通信和自适应高度的问题  # jQuery简单实现iframe的高度根据页面内容自适应的方法  # JS实现iframe自适应高度的方法(兼容IE与FireFox)  # iframe实现高度自适应小程序web-view方案  # 我们可以  # 这个时候  # 不支持  # 来做  # 给它  # 几个  # 这一  # 相关内容  # 你可以  # 多个  # 遍历  # 又有  # 感兴趣  # 数据结构  # 用了  # 不受  # 给大家  # 或者是  # 可以看到 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 如何快速使用云服务器搭建个人网站？  公司门户网站制作公司有哪些,怎样使用wordpress制作一个企业网站？  javascript事件捕获机制【深入分析IE和DOM中的事件模型】  如何快速搭建高效WAP手机网站吸引移动用户？  node.js报错：Cannot find module &#39;ejs&#39;的解决办法  如何在IIS中新建站点并配置端口与IP地址？  如何用IIS7快速搭建并优化网站站点？  javascript中闭包概念与用法深入理解  Laravel如何使用Passport实现OAuth2？（完整配置步骤）  HTML透明颜色代码怎么让图片透明_给img元素加透明色的技巧【方法】  网站设计制作书签怎么做,怎样将网页添加到书签/主页书签/桌面？  Laravel怎么使用Blade模板引擎_Laravel模板继承与Component组件复用【手册】  canvas 画布在主流浏览器中的尺寸限制详细介绍  Laravel如何使用Service Container和依赖注入？（代码示例）  百度输入法ai面板怎么关 百度输入法ai面板隐藏技巧  Laravel数据库迁移怎么用_Laravel Migration管理数据库结构的正确姿势  Laravel如何自定义错误页面（404, 500）？（代码示例）  公司门户网站制作流程,华为官网怎么做？  如何在万网利用已有域名快速建站？  如何在阿里云虚拟机上搭建网站？步骤解析与避坑指南  深入理解Android中的xmlns:tools属性  Laravel如何实现用户角色和权限系统_Laravel角色权限管理机制  Laravel如何与Vue.js集成_Laravel + Vue前后端分离项目搭建指南  Laravel如何使用Blade模板引擎？（完整语法和示例）  企业在线网站设计制作流程,想建设一个属于自己的企业网站，该如何去做？  Laravel如何实现RSS订阅源功能_Laravel动态生成网站XML格式订阅内容【教程】  网站广告牌制作方法,街上的广告牌，横幅，用PS还是其他软件做的？  高配服务器限时抢购：企业级配置与回收服务一站式优惠方案  Java遍历集合的三种方式  Laravel如何实现用户密码重置功能？（完整流程代码）  如何在Windows虚拟主机上快速搭建网站？  javascript中数组（Array)对象和字符串（String)对象的常用方法总结  Laravel Eloquent模型如何创建_Laravel ORM基础之Model创建与使用教程  如何在香港服务器上快速搭建免备案网站？  Laravel Asset编译怎么配置_Laravel Vite前端构建工具使用  如何在IIS中新建站点并配置端口与物理路径？  Laravel集合Collection怎么用_Laravel集合常用函数详解  Laravel怎么设置路由分组Prefix_Laravel多级路由嵌套与命名空间隔离【步骤】  Python并发异常传播_错误处理解析【教程】  使用Dockerfile构建java web环境  Laravel DB事务怎么使用_Laravel数据库事务回滚操作  Swift中switch语句区间和元组模式匹配  PHP 实现电台节目表的智能时间匹配与今日/明日轮播逻辑  高防服务器租用指南：配置选择与快速部署攻略  Java解压缩zip - 解压缩多个文件或文件夹实例  详解阿里云nginx服务器多站点的配置  Laravel项目怎么部署到Linux_Laravel Nginx配置详解  Laravel如何使用Seeder填充数据_Laravel模型工厂Factory批量生成测试数据【方法】  Laravel怎么为数据库表字段添加索引以优化查询  如何在建站主机中优化服务器配置？