javascript 中iframe高度自适应（同域）实例详解_网络技术

javascript 中iframe高度自适应（同域）实例详解

发布时间 - 2026-01-11 01:08:01 点击率：次

javascript 中iframe高度自适应（同域）

今天解决了iframe高度自适应的问题，不过这只是同域下的页面嵌入，以下是代码：

function SetCwinHeight(){

     var iframeid = document.getElementById("frame");  //frame是iframe的id

     if (document.getElementById) {
      if (iframeid && !window.opera) {
        if (iframeid.contentDocument && iframeid.contentDocument.body.offsetHeight) {

         iframeid.height = iframeid.contentDocument.body.offsetHeight;

        }else if (iframeid.Document && iframeid.Document.body.scrollHeight) {
         
         iframeid.height = iframeid.Document.body.scrollHeight;
         
        }
      }
     }

iframe嵌入页面时需要等待它完全加载完后才可以调用SetCwinHeight()，所以当修改iframe里的src值时，也需要等待修改的页面完全嵌入后才可以调用SetCwinHeight()，这样才有效果，那么该怎么放置SetCwinHeight()，我的解决方法是在iframe标签里直接调用，即这样写 <iframe onload = "SetCwinHeight();"></iframe>，但是这样的的话会污染了html环境，可是在js中一般只用一次window.onload = function(){}，如果使用多次，后面的会覆盖前面的，所以目前为止我能想到的解决方法就这一个，

当嵌入页面修改时，iframe的高度也需要调整，当我在js文件直接这样window.onload = function(){SetCwinHeight();}调用SetCwinHeight()时，只有刷新整个页面才可以自适应高度，如果修改了iframe的src，iframe的高度还是前一个页面的高度，当前页面的高度无法自适应，一开始我以为是SetCwinHeight()写错了，但是当刷新整个页面时，当前页面又可以自适应了，在遇到这个问题之后，我的焦急毛病又出现了，总是没有分析问题就急急忙忙的去查找有关于问题的解决方法，然后查出来的又文不对题，这样反反复复，不仅浪费了时间，还使得自己的心情特别烦躁，这样的话工作就无法再进展下去。通过了这次的工作明白了自己的毛病，在休息了一会后，重新静下心来整理思路，然后分析出现的问题，程序如何运行，点击后程序运行的步骤又是什么，分析完后再看看是哪一步出错了，为什么会出错，像这次出现的错误，并不是程序写错了，而是程序运行的步骤出错了，整个页面刷新后就可以实现效果，但是修改src后又没有效果了，而window.onload = function(){}这一步是等待页面完全加载完后才执行，那么应该就是加载的问题了，所以需要等待页面加载完后才可以调用SetCwinHeight()，通过这样的分析，最后终于将问题解决了，经过这次，我一定要改掉急躁这个毛病，应该在遇到问题后，先分析问题和思考解决方法，如果自己解决不了再去查找相应的解决方法。这样就不会浪费时间和精力了。

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

# iframe高度自适应（同域） # javascript # iframe高度自适应 # iframe高度自适应及隐藏滚动条的实例详解 # JS实现iframe自适应高度的方法示例 # JS解决iframe之间通信和自适应高度的问题 # jQuery简单实现iframe的高度根据页面内容自适应的方法 # JS实现iframe自适应高度的方法(兼容IE与FireFox) # iframe实现高度自适应小程序web-view方案 # 解决方法 # 错了 # 自适应 # 完后 # 才可以 # 自己的 # 加载 # 是在 # 解决了 # 这一 # 文不对题 # 我在 # 又是 # 这个问题 # 我能 # 希望能 # 才有 # 这只 # 再去 # 会后

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

上一篇：提升建站空间稳定可靠的5个技巧，保障业务连续性

下一篇：dos2unix命令解决 Shell 脚本无法执行的问题

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：提升建站空间稳定可靠的5个技巧，保障业务连续性

下一篇：dos2unix命令解决 Shell 脚本无法执行的问题