本文实例讲述了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 】

相关推荐： Laravel怎么配置.env环境变量_Laravel生产环境敏感数据保护与读取【方法】  Win11搜索栏无法输入_解决Win11开始菜单搜索没反应问题【技巧】  微信小程序 require机制详解及实例代码  如何在万网自助建站中设置域名及备案？  阿里云高弹*务器配置方案｜支持分布式架构与多节点部署  极客网站有哪些,DoNews、36氪、爱范儿、虎嗅、雷锋网、极客公园这些互联网媒体网站有什么差异？  创业网站制作流程,创业网站可靠吗？  Laravel如何处理JSON字段_Eloquent原生JSON字段类型操作教程  JavaScript Ajax实现异步通信  专业型网站制作公司有哪些,我设计专业的，谁给推荐几个设计师兼职类的网站？  历史网站制作软件,华为如何找回被删除的网站？  javascript日期怎么处理_如何格式化输出  如何快速搭建安全的FTP站点？  Laravel如何处理文件上传_Laravel Storage门面实现文件存储与管理  微信小程序 input输入框控件详解及实例（多种示例）  深圳防火门网站制作公司,深圳中天明防火门怎么编码？  进行网站优化必须要坚持的四大原则  jQuery中的100个技巧汇总  如何用美橙互联一键搭建多站合一网站？  Android使用GridView实现日历的简单功能  Win11任务栏卡死怎么办 Windows11任务栏无反应解决方法【教程】  网站制作大概要多少钱一个,做一个平台网站大概多少钱？  Laravel如何使用Service Provider服务提供者_Laravel依赖注入与容器绑定【深度】  如何在阿里云高效完成企业建站全流程？  php嵌入式断网后怎么恢复_php检测网络重连并恢复硬件控制【操作】  CSS3怎么给轮播图加过渡动画_transition加transform实现【技巧】  Laravel如何清理系统缓存命令_Laravel清除路由配置及视图缓存的方法【总结】  Laravel如何使用Laravel Vite编译前端_Laravel10以上版本前端静态资源管理【教程】  javascript中的try catch异常捕获机制用法分析  高端建站如何打造兼具美学与转化的品牌官网？  高防服务器租用如何选择配置与防御等级？  logo在线制作免费网站在线制作好吗,DW网页制作时，如何在网页标题前加上logo？  Laravel怎么使用Intervention Image库处理图片上传和缩放  Laravel的路由模型绑定怎么用_Laravel Route Model Binding简化控制器逻辑  如何自定义建站之星网站的导航菜单样式？  如何在HTML表单中获取用户输入并结合JavaScript动态控制复利计算循环  Laravel如何集成Inertia.js与Vue/React？（安装配置）  Python函数文档自动校验_规范解析【教程】  为什么要用作用域操作符_php中访问类常量与静态属性的优势【解答】  魔毅自助建站系统：模板定制与SEO优化一键生成指南  详解MySQL数据库的安装与密码配置  Laravel Livewire是什么_使用Laravel Livewire构建动态前端界面  Laravel如何实现API版本控制_Laravel版本化API设计方案  C语言设计一个闪闪的圣诞树  google浏览器怎么清理缓存_谷歌浏览器清除缓存加速详细步骤  Laravel怎么实现模型属性的自动加密  HTML5空格在Angular项目里怎么处理_Angular中空格的渲染问题【详解】  QQ浏览器网页版登录入口 个人中心在线进入  laravel怎么在请求结束后执行任务（Terminable Middleware）_laravel Terminable Middleware请求结束任务执行方法  Laravel如何处理JSON字段的查询和更新_Laravel JSON列操作与查询技巧