在主页面中对于嵌入的iframe页面高度未知,而且iframe页面的高度也不定,故不能在主页面中通过DOM来控制高度。在iframe页面中加入以下脚本便可实现:

/*
iframe 高度自适应脚本(IE6+、FF、Opera、Chrome等测试通过) 作者未知
*/
function iframeAutoFit() {
  try {
    if(window != parent) {
      var a = parent.document.getElementsByTagName("IFRAME");
      for(var i = 0; i < a.length; i++) {
        if(a[i].contentWindow == window) {
          var h1 = 0, h2 = 0, d = document, dd = d.documentElement;
          a[i].parentNode.style.height = a[i].offsetHeight +"px";
          a[i].style.height = "10px";
          if(dd && dd.scrollHeight) {
            h1=dd.scrollHeight;
          }
          if(d.body) {
            h2 = d.body.scrollHeight;
          }
          var h = Math.max(h1, h2);
          if(document.all) {
            h += 4;
          }
          if(window.opera) {
            h += 1;
          }
          a[i].style.height = a[i].parentNode.style.height = h +"px";
        }
      }
    }
  } catch(ex) {}
}

if(window.attachEvent) {
  window.attachEvent("onload", iframeAutoFit);
} else if(window.addEventListener) {
  window.addEventListener("load", iframeAutoFit, false);
}

转载于:https://www.cnblogs.com/flysnow-z/archive/2009/04/10/1433286.html

iframe高度自适应(IE6+、FF、Opera、Chrome等测试通过)相关推荐

  1. 跨域iframe高度自适应(兼容IE/FF/OP/Chrome)

    采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引发出同域.跨域两种情况. 由于客户端js使用浏览器的同源安全策 ...

  2. Iframe高度自适应(兼容IE/Firefox、同域/跨域)

    在实际的项目进行中,很多地方可能由于历史原因不得不去使用iframe,包括目前正火热的应用开发也是如此. 随之而来的就是在实际使用iframe中,会遇到iframe高度的问题,由于被嵌套的页面长度不固 ...

  3. CSS完美实现iframe高度自适应(支持跨域)

    https://blog.csdn.net/qq_32915337/article/details/79900222 Iframe的强大功能偶就不多说了,它不但被开发人员经常运用,而且黑客们也常常使用 ...

  4. 完美实现跨域Iframe高度自适应【Iframe跨域高度自适应解决方案】

    Iframe的强大功能偶就不多说了,它不但被开发人员经常运用,而且黑客们也常常使用它,总之用过的人知道它的强大之处,但是Iframe有个致命的"BUG"就是iframe的高度无法自 ...

  5. 6种iframe高度自适应的方法

    js自适应高度,实际上就是设置iframe的高度,设置等于内嵌网页的高度,从而看不到滚动条和嵌套痕迹.对于用户体验和网站美观起着重要作用.我们可以通过css来给它直接定义一个高度,同样可以实现上面的需 ...

  6. Iframe高度自适应(兼容IEFirefox、同域跨域)

    在实际的项目进行中,很多地方可能由于历史原因不得不去使用iframe,包括目前正火热的应用开发也是如此. 随之而来的就是在实际使用iframe中,会遇到iframe高度的问题,由于被嵌套的页面长度不固 ...

  7. iframe高度自适应的6个方法

    iframe内容未知,高度可预测 这个时候,我们可以给它添加一个默认的CSS的min-height值,然后同时使用JavaScript改变高度.常用的兼容代码有: // document.domain ...

  8. iframe高度自适应的6个方法【转载】

    iframe高度自适应的6个方法 JS自适应高度,其实就是设置iframe的高度,使其等于内嵌网页的高度,从而看不出来滚动条和嵌套痕迹.对于用户体验和网站美观起着重要作用. 如果内容是固定的,那么我们 ...

  9. 纯CSS实现iframe高度自适应,完美兼容各种浏览器,同域异域

    最近做项目需要引用外部页面,在网上找的许多关于iframe高度自适应的文章,有的只能同域访问,有的可以实现异域,但是需要异域是可编辑的.对于我这种情况都不适用.而且,这些方法都需要用js. 后来,我发 ...

最新文章

  1. devkit_如何使用NodeMCU Devkit和Firebase数据库开始物联网
  2. java 打开服务器excel文件_Java中上传excel文件并在服务器端读取存入数据库
  3. 剑指offer---11---二进制中1的个数
  4. vc++ mfc 非客户区 描绘线_决战客户端技术
  5. Java 8 Stream Tutorial--转
  6. [ARM异常]-ARM Core中与中断相关的寄存器
  7. Oracle添加定时任务
  8. tensorflow随笔-条件循环控制(2)
  9. 三十四、Scrapy中的CrawlSpider
  10. 计算机除法和取余在实际运用中的意义
  11. 简述机器指令与微指令之间的关系_计算机组成原理期末考试题-百度文库
  12. flask 路由 php文件,Flask 请求处理流程(一):WSGI 和 路由
  13. ImportError: libSM.so.6: cannot open shared object file: No such file or dir
  14. mysql age字段类型_mysql 列类型
  15. 循环(概念、for循环、while循环 、do-while循环)
  16. ACM算法模板小汇总
  17. 建设内链要注意的事项
  18. 机器视觉软件开发SDK
  19. 【高斯 GANSS 键盘】 GS87-D 设置指南
  20. [读书笔记]多线程学习笔记

热门文章

  1. ubuntu下安装JDK和netbeans
  2. group by rollup
  3. 如何开启OpenSSL和mcrypt
  4. 问题: 将N个元素使用push_back插入到vector中, 求push_back操作的复杂度。
  5. linux安装pip
  6. 知识图谱应用合辑第一篇:多模态知识图谱的使用领域及最新进展
  7. Java宣言的时候,Java基础恶补——宣言及访问控制
  8. 查看oracle自动优化,使用索引查询更快,优化器为何不能自动识别
  9. 前后端分手大师——MVVM 模式
  10. CSS揭秘(二)背景与边框