IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者

iframe自适应高度代码

断桥残雪部落格 2011-08-23 13:24:07 累计浏览 3,905 次
本机暂存

有不少wBox的用户反映iframe时候不可以自动撑开高度,今天在无意中看到了司徒正美的一片关于iframe自适用高度的js代码,感觉不错,转载来了。

var adjustIframe = function (id) {
    var iframe = document.getElementById(id)
    var idoc = iframe.contentWindow && iframe.contentWindow.document || iframe.contentDocument;
    var callback = function () {
        var iheight = Math.max(idoc.body.scrollHeight, idoc.documentElement.scrollHeight); //取得其高
        iframe.style.height = iheight + "px";
    }
    if (iframe.attachEvent) {
        iframe.attachEvent("onload", callback);
    } else {
        iframe.onload = callback
    }
}
HTML代码如下所示: 
<iframe id="js_sub_web" width="80%" frameborder="0" scrolling="no" allowTransparency="true" src="http://www.cnblogs.com/rubylouvre/archive/2009/09/15/1566722.html">
</iframe>

使用代码:

window.onload = function(){
     adjustIframe("js_sub_web");
}

推荐几篇关于Iframe的文章:

  1. 再谈Iframe的问题
  2. 解决IE6 select z-index无效,遮挡div的bug
  3. 使用JavaScript在IE和Firefox下进行iframe的DOM操作
  4. 用document.domain+iframe实现Ajax跨子域
  5. 关于Ajax在浏览器中产生前进后退的实现方法

同分类推荐文章

  1. 新特性速递:focus()行为新增focusVisible控制 (2026-05-29 16:23:06)
  2. Algorithmic Theming Engines: Building Self-Correcting Color Systems With `contrast-color()` (2026-05-28 21:00:00)
  3. Revealing Text With CSS letter-spacing (2026-05-27 20:37:33)

查看更多 前端 文章 →

建议继续学习

  1. JQuery实现Excel表格呈现 (累计阅读 48,263)
  2. 深入理解Javascript之执行上下文(Execution Context) (累计阅读 18,263)
  3. 从输入 URL 到页面加载完成的过程中都发生了什么事情? (累计阅读 15,802)
  4. 图片动态局部毛玻璃模糊效果的实现 (累计阅读 14,764)
  5. 天朝第二代身份证号码的验证机制 (累计阅读 14,684)
  6. HTML 5 的data-* 自定义属性 (累计阅读 14,242)
  7. 分享一个JQUERY颜色选择插件 (累计阅读 14,142)
  8. 什么是全栈工程师? (累计阅读 13,943)
  9. 快速排序(Quicksort)的Javascript实现 (累计阅读 11,640)
  10. 7 天打造前端性能监控系统 (累计阅读 11,102)