0

0

iframe自适应高度的多种方法方法小结_经验交流

php中文网

php中文网

发布时间:2016-05-16 12:04:39

|

3433人浏览过

|

来源于php中文网

原创

不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 iframe的大小却不像层那样可以“伸缩自如”,所以带来了使用上的麻烦,给iframe设置高度的时候多了也不好,少了更是不行,现在,让我来告诉大 家一种iframe动态调整高度的方法,主要是以下js函数:
第一种方法:代码简单,兼容性还可以,大家可以先测试下。

复制代码 代码如下:

function SetWinHeight(obj)
{
var win=obj;
if (document.getElementById)
{
if (win && !window.opera)
{
if (win.contentDocument && win.contentDocument.body.offsetHeight)
win.height = win.contentDocument.body.offsetHeight;
else if(win.Document && win.Document.body.scrollHeight)
win.height = win.Document.body.scrollHeight;
}
}
}

最后,加入iframe,不能丢掉onload属性,当然了,id也必须也函数中的win匹配

复制代码 代码如下:



这么的这种也是跟上面的解决方法类似的代码
经典代码 iFrame 自适应高度,在IE6/IE7/IE8/Firefox/Opera/Chrome/Safari通过测试。
HTML代码:

复制代码 代码如下:

Javascript代码:
<script type="text/javascript" language="javascript"> <br>function iFrameHeight() { <br>var ifm= document.getElementById("iframepage"); <br>var subWeb = document.frames ? document.frames["iframepage"].document : ifm.contentDocument; <br>if(ifm != null && subWeb != null) { <br>ifm.height = subWeb.body.scrollHeight; <br>} <br>} <br></script>


下面这个兼容性更好一些
复制代码 代码如下:

<script language="javascript" type="text/javascript"> <br>function dyniframesize(down) { <br>var pTar = null; <br>if (document.getElementById){ <br>pTar = document.getElementById(down); <br>} <br>else{ <br>eval('pTar = ' + down + ';'); <br>} <br>if (pTar && !window.opera){ <br>//begin resizing iframe <br>pTar.style.display="block" <br>if (pTar.contentDocument && pTar.contentDocument.body.offsetHeight){ <br>//ns6 syntax <br>pTar.height = pTar.contentDocument.body.offsetHeight +20; <br>pTar.width = pTar.contentDocument.body.scrollWidth+20; <br>} <br>else if (pTar.Document && pTar.Document.body.scrollHeight){ <br>//ie5+ syntax <br>pTar.height = pTar.Document.body.scrollHeight; <br>pTar.width = pTar.Document.body.scrollWidth; <br>} <br>} <br>} <br></script>



另一种情况的iframe解决方案(超简单)

重要提示:src=中你必须填写的网页地址,一定要和本页面在同一个站点上,否则,会抱错,说“拒绝访问!”(实际上这是因为Js的跨域问题导致拒绝访问的)
之前自己也碰到过这个问题,为了得到答案去网上搜索,发现有不少人也遇到了这样的问题,现在就把解决方法共享一下
1、建立一个bottom.js的文件,然后输入下面的代码(只有两行哦)

复制代码 代码如下:

parent.document.all("框架ID名").style.height=document.body.scrollHeight;
parent.document.all("框架ID名").style.width=document.body.scrollWidth;

这里的 框架ID名 就是Iframe的ID,比如:

复制代码 代码如下:



2、给你网站里所有的被包含文件里面每个都加入

Ribbet.ai
Ribbet.ai

免费在线AI图片处理编辑

下载
复制代码 代码如下:

<script language="JavaScript" src="bottom.js"></script>

3、OK,收工!
在WINXP、IE6下面测试通过。很简单吧!
实现 iframe 的自适应高度
实现 iframe 的自适应高度,能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象。

复制代码 代码如下:

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

第三中方法批量iframe自适应:

工作中遇到iframe随所含内容自适应高度的问题,以前在网上看到过类似问题的解决方法,于是搜索一下,找到了一个比较完整的能够兼容浏览器的解决方法,省得自己写了。
虽然不用自己写,思路还是要明白,基本上就是取得iframe属性src所指定的包含文档中内容的高度,然后用来设置iframe自身的高度,在iframe所在页面载入时对页面中的所有需要自适应高度的iframe进行自动设置,省时省力,如果确定页面中全部iframe都需要自适应高度,直接取得iframe数组给代码,就连ID都不用自己写了,完成程序搞定。(代码贴上来:)

复制代码 代码如下:

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


网上有人改进了方法,解决了当iframe所包含文档内容高度动态变化时自动调整iframe高度的问题,原理是在iframe所在页面不断扫描iframe包含文档的内容高度并改变iframe自身高度,这种方法貌似解决了问题,但是对页面速度和系统资源占用是否有影响还很难说,感觉方法有些偏执,应该有更好的解决方法。
第四种方法,只针对知道的iframe的ID调用 不推荐

复制代码 代码如下:

function iframeAutoFit(iframeObj){
    setTimeout(function(){if(!iframeObj) return;iframeObj.height=(iframeObj.Document?iframeObj.Document.body.scrollHeight:iframeObj.contentDocument.body.offsetHeight);},200)
}

使用方法呢,大家在需要自适应的iframe上加个id,然后js执行就可以了

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
JavaScript浏览器渲染机制与前端性能优化实践
JavaScript浏览器渲染机制与前端性能优化实践

本专题围绕 JavaScript 在浏览器中的执行与渲染机制展开,系统讲解 DOM 构建、CSSOM 解析、重排与重绘原理,以及关键渲染路径优化方法。内容涵盖事件循环机制、异步任务调度、资源加载优化、代码拆分与懒加载等性能优化策略。通过真实前端项目案例,帮助开发者理解浏览器底层工作原理,并掌握提升网页加载速度与交互体验的实用技巧。

23

2026.03.06

Rust内存安全机制与所有权模型深度实践
Rust内存安全机制与所有权模型深度实践

本专题围绕 Rust 语言核心特性展开,深入讲解所有权机制、借用规则、生命周期管理以及智能指针等关键概念。通过系统级开发案例,分析内存安全保障原理与零成本抽象优势,并结合并发场景讲解 Send 与 Sync 特性实现机制。帮助开发者真正理解 Rust 的设计哲学,掌握在高性能与安全性并重场景中的工程实践能力。

68

2026.03.05

PHP高性能API设计与Laravel服务架构实践
PHP高性能API设计与Laravel服务架构实践

本专题围绕 PHP 在现代 Web 后端开发中的高性能实践展开,重点讲解基于 Laravel 框架构建可扩展 API 服务的核心方法。内容涵盖路由与中间件机制、服务容器与依赖注入、接口版本管理、缓存策略设计以及队列异步处理方案。同时结合高并发场景,深入分析性能瓶颈定位与优化思路,帮助开发者构建稳定、高效、易维护的 PHP 后端服务体系。

162

2026.03.04

AI安装教程大全
AI安装教程大全

2026最全AI工具安装教程专题:包含各版本AI绘图、AI视频、智能办公软件的本地化部署手册。全篇零基础友好,附带最新模型下载地址、一键安装脚本及常见报错修复方案。每日更新,收藏这一篇就够了,让AI安装不再报错!

84

2026.03.04

Swift iOS架构设计与MVVM模式实战
Swift iOS架构设计与MVVM模式实战

本专题聚焦 Swift 在 iOS 应用架构设计中的实践,系统讲解 MVVM 模式的核心思想、数据绑定机制、模块拆分策略以及组件化开发方法。内容涵盖网络层封装、状态管理、依赖注入与性能优化技巧。通过完整项目案例,帮助开发者构建结构清晰、可维护性强的 iOS 应用架构体系。

113

2026.03.03

C++高性能网络编程与Reactor模型实践
C++高性能网络编程与Reactor模型实践

本专题围绕 C++ 在高性能网络服务开发中的应用展开,深入讲解 Socket 编程、多路复用机制、Reactor 模型设计原理以及线程池协作策略。内容涵盖 epoll 实现机制、内存管理优化、连接管理策略与高并发场景下的性能调优方法。通过构建高并发网络服务器实战案例,帮助开发者掌握 C++ 在底层系统与网络通信领域的核心技术。

29

2026.03.03

Golang 测试体系与代码质量保障:工程级可靠性建设
Golang 测试体系与代码质量保障:工程级可靠性建设

Go语言测试体系与代码质量保障聚焦于构建工程级可靠性系统。本专题深入解析Go的测试工具链(如go test)、单元测试、集成测试及端到端测试实践,结合代码覆盖率分析、静态代码扫描(如go vet)和动态分析工具,建立全链路质量监控机制。通过自动化测试框架、持续集成(CI)流水线配置及代码审查规范,实现测试用例管理、缺陷追踪与质量门禁控制,确保代码健壮性与可维护性,为高可靠性工程系统提供质量保障。

79

2026.02.28

Golang 工程化架构设计:可维护与可演进系统构建
Golang 工程化架构设计:可维护与可演进系统构建

Go语言工程化架构设计专注于构建高可维护性、可演进的企业级系统。本专题深入探讨Go项目的目录结构设计、模块划分、依赖管理等核心架构原则,涵盖微服务架构、领域驱动设计(DDD)在Go中的实践应用。通过实战案例解析接口抽象、错误处理、配置管理、日志监控等关键工程化技术,帮助开发者掌握构建稳定、可扩展Go应用的最佳实践方法。

62

2026.02.28

Golang 性能分析与运行时机制:构建高性能程序
Golang 性能分析与运行时机制:构建高性能程序

Go语言以其高效的并发模型和优异的性能表现广泛应用于高并发、高性能场景。其运行时机制包括 Goroutine 调度、内存管理、垃圾回收等方面,深入理解这些机制有助于编写更高效稳定的程序。本专题将系统讲解 Golang 的性能分析工具使用、常见性能瓶颈定位及优化策略,并结合实际案例剖析 Go 程序的运行时行为,帮助开发者掌握构建高性能应用的关键技能。

51

2026.02.28

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
HTML 代码实例
HTML 代码实例

共27课时 | 15.6万人学习

进程与SOCKET
进程与SOCKET

共6课时 | 0.4万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号