iframe自适应高度(支持XHTML，支持FF)

最新推荐文章于 2024-08-23 14:03:47 发布
最新推荐文章于 2024-08-23 14:03:47 发布
阅读量649 收藏
点赞数
分类专栏： WEB 文章标签： iframe xhtml mozilla function less class
先说明，这个办法只限于iframe中的子页面也是本地页面（不能引用外网页面）

======方法=====
第一步 js部分

function getSize() {
var xScroll, yScroll;
if (window.innerHeight && window.scrollMaxY) {
xScroll = document.body.scrollWidth;
yScroll = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}

var windowWidth, windowHeight;
if (self.innerHeight) { // all except Explorer
windowWidth = self.innerWidth;
windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else if (document.body) { // other Explorers
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}

// for small pages with total height less then height of the viewport
if(yScroll < windowHeight){
pageHeight = windowHeight;
y = pageHeight;
} else {
pageHeight = yScroll;
y = pageHeight;
}

if(xScroll < windowWidth){
pageWidth = windowWidth;
} else {
pageWidth = xScroll;
}

arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)
return arrayPageSize;
}
这段代码用来获取目标页的参数，包括页面高、宽，屏幕高、宽
function autoHeight(pid) {
var x = new getSize();
parent.document.getElementById(pid).height=x[1];
}
这段代码用来实现父页面中iframe的高度自适应

/
第二步 页面部分

<div class="onright" style="width:480px;"><iframe id="infrm" name="infrm" marginwidth="0" marginheight="0" width="100%" src="park.htm" frameborder="0" scrolling="auto"></iframe>
这是父页面的iframe，没什么特别的，和普通的iframe一样，不过要设置好id值，以便子页面的参数调用。

<body οnlοad="autoHeight('infrm')"></body>
在body中利用onload事件，将自身的高度传给父页面的iframe。

/
打完收工～本方法在IE6，FF2，XPsp2下顺利通过，FF无报错～
TCM-caleng
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
iframe高度自适应解决方式
lavendersue的博客
11-26 1441
带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能，可是 iframe的大小却不像层那样可以“伸缩自如”，所以带来了使用上的麻烦，给iframe设置高度的时候多了也不好，少了更是不行，现在，让我来告诉大 家几种iframe动态调整高度的方法。 1、 <iframe width="778" align="center" height="200" id=...
Iframe自适应高度，Iframe高度问题解决
蕃薯耀的博客
03-10 4689
Iframe自适应高度，Iframe高度问题解决 ================================ ©Copyright 蕃薯耀2021-03-10 https://www.cnblogs.com/fanshuyao/ 一、Iframe自适应高度方法 /** * 父级页面获取子级页面的高度 给元素设置高度 * 在onload事件之后才生效，即第一次加载才生效，后面高度变化...
iframe自适应高度计算，iframe自适应
weixin_30569033的博客
05-12 84
计算页面的实际高度，iframe自适应会用到 IfrHeight: function (iframeId, callback) { 　　var height; 　　function calcPageHeight(doc) { 　　var cHeight = Math.max(doc.body.clientHeight, doc.docume...
让iframe自适应高度（支持XHTML，支持FF）
anjichan4261的博客
11-30 70
这个办法只限于iframe中的子页面也是本地页面（不能引用外网页面） ======方法===== 第一步 js部分 function getSize() { var xScroll, yScroll; if (window.innerHeight && window.scrollMaxY) { xScroll = document.body.scrollWidth; ...
让iframe自适应高度（支持xhtml）IE firefox兼容
10-30
让iframe自适应高度（支持xhtml）IE firefox兼容 让iframe自适应高度是指在HTML文档中，使iframe的高度能够根据其内容自动调整，以适应不同浏览器和屏幕分辨率的需求。在本文中，我们将讨论如何使用JavaScript和...
JavaScript 处理Iframe自适应高度(同或不同域名下)
10-27
在Web开发中，Iframe标签常用于在当前页面嵌入另一个页面，但其自适应高度的问题一直是一个困扰开发者的技术难题。Iframe的自适应高度问题分为同域名下的自适应和跨域自适应两种情况。 首先，我们来探讨同域名下的...
js实现iframe自动自适应高度的方法
10-24
本篇文章将详细介绍如何使用JavaScript实现Iframe的自动自适应高度。 首先，理解基本概念。Iframe的`height`属性决定了其显示区域的高度，当我们想要Iframe内容自适应时，我们需要动态地修改这个属性值，使其等于...
使用itextpdf5.x将网页转为PDF,并添页眉页脚页码
qingqingzijinxin的专栏
08-23 110
itextpdf，html转pdf
Vue自动注入全局SASS/LESS全局变量
qq_39691676的博客
08-20 291
【代码】Vue自动注入全局SCSS/LESS全局变量。
详解Linux命令--less
简介
08-20 675
less命令是Linux中最基本也是最常用的命令之一，掌握其各种选项和交互式操作可以帮助你更有效地查看文本文件。
编程爱好者博客地带.zip
08-23
该毕业设计将深入探讨如何通过Java语言构建一个完整且高效的《编程爱好者博客地带》。毕业设计的架构涵盖了从基础框架搭建到关键功能实现的每一个环节，并采用了模块化设计，使整个系统易于理解、扩展和维护。 无论是数据处理、用户交互还是后台管理，我们都为您提供了详细的代码示例和设计文档。 这个毕业设计的独特之处在于其高度的实用性和灵活性。 我们提供了全面的资源包，帮助您快速入门，并支持您在此基础上进行个性化的功能扩展。 无论您是正在寻找灵感的学生，还是需要现成解决方案的开发者，下载该资源将助您事半功倍。
基于springboot的教学资料管理系统 源码+数据库（毕业设计）
08-23
基于Vue.js和SpringBoot的教学资料管理系统是一个功能全面、易于使用的教育管理平台，它分为用户前台和管理后台两个部分，旨在为管理员和教师提供便捷的教学资源管理服务。系统的主要功能模块包括： 班级管理模块：管理员和教师可以创建、编辑和删除班级信息，同时查看班级成员和分配教师。 教学资料模块：教师可以上传、管理和分享教学资料，如课件、视频、文档等，方便学生学习和教师备课。 课程管理模块：管理员可以设置课程信息，包括课程名称、课程描述、授课教师等，教师可以查看和管理自己负责的课程。 老师管理模块：管理员可以添加、编辑和删除教师信息，包括教师的基本信息、教学科目和授课班级等。 学生管理模块：管理员可以管理学生信息，包括学生的基本信息、所在班级和学习情况等。 录屏：https://www.bilibili.com/video/BV1i2421Z7Rk 教程：https://space.bilibili.com/417412814/channel/collectiondetail?sid=2242844
weixin201基于微信小程序的校园保修系统springboot.zip
最新发布
08-23
针对成果信息管理混乱，出错率高，信息安全性差，劳动强度大，费时费力等问题，采用基于web的校园报修系统可以有效管理，使信息管理能够更加科学和规范。 基于web的校园报修系统使用Java语言进行编码，使用Mysql创建数据表保存本系统产生的数据。系统可以提供信息显示和相应服务，总之，基于web的校园报修系统集中管理信息，有着保密性强，效率高，存储空间大，成本低等诸多优点。它可以降低信息管理成本，实现信息管理计算机化。
技术数字养殖解决方案.pdf
08-23
技术数字养殖解决方案.pdf
weixin012基于微信小程序的科创微应用平台设计与实现+ssm.zip
08-23
本基于微信小程序的科创微应用平台管理员功能有个人中心，用户管理，企业管理，场地信息管理，场地类型管理，预约参观管理，场地预约管理，活动信息管理，报名信息管理，我的收藏管理，试题管理，试卷管理，系统管理，考试管理。用户和企业可以注册登录。企业可以发布信息，用户可以预约信息，可以参加考试等。因而具有一定的实用性。 本基于微信小程序的科创微应用平台，后台采用SSM框架，MYSQL数据库设计开发，微信小程序用微信开发者工具开发，充分保证系统的稳定性。系统具有界面清晰、操作简单，功能齐全的特点，使得基于微信小程序的科创微应用平台管理工作系统化、规范化。本系统的使用使管理人员从繁重的工作中解脱出来，实现无纸化办公，能够有效的提高基于微信小程序的科创微应用平台管理效率。
《黑神话：悟空》将上线，有望催化板块，业绩期关注绩优方向.pdf
08-23
【华创证券】传媒行业周观察（20240812-20240816）：《黑神话：悟空》将上线，有望催化板块，业绩期关注绩优方向.pdf【华创证券】传媒行业周观察（20240812-20240816）：《黑神话：悟空》将上线，有望催化板块，业绩期关注绩优方向.pdf【华创证券】传媒行业周观察（20240812-20240816）：《黑神话：悟空》将上线，有望催化板块，业绩期关注绩优方向.pdf【华创证券】传媒行业周观察（20240812-20240816）：《黑神话：悟空》将上线，有望催化板块，业绩期关注绩优方向.pdf【华创证券】传媒行业周观察（20240812-20240816）：《黑神话：悟空》将上线，有望催化板块，业绩期关注绩优方向.pdf【华创证券】传媒行业周观察（20240812-20240816）：《黑神话：悟空》将上线，有望催化板块，业绩期关注绩优方向.pdf【华创证券】传媒行业周观察（20240812-20240816）：《黑神话：悟空》将上线，有望催化板块，业绩期关注绩优方向.pdf【华创证券】传媒行业周观察（20240812-20240816）：《黑神话：悟空》将上线，
iframe 自适应高度
08-11
对于 iframe 的自适应高度，你可以使用以下方法： 1. 使用 JavaScript 动态调整 iframe 的高度：在父页面中，通过 JavaScript 获取 iframe 的内容高度，然后将这个高度应用到 iframe 的样式中。你可以使用以下代码...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值