我们在项目中的开发标准分辨率是1024*768,但是在当今大屏幕显示器越来越普及的情况下,我们需要尽量让整个页面铺满,少留空白,同时兼容各种浏览器。在网上搜了一位高手朋友的代码,再此感谢那位仁兄。
要实现 iframe 或者 div 在 页面中的高度自适应,我们需要做两件事情:
1 取得 页面的高度 ,JS代码如下
/*
*获得页面的高度、宽度,兼容各种浏览器的方法
*@author fengf
*@createDate 2011-10-25
*/
function ___getPageSize() {
var xScroll, yScroll;
if (window.innerHeight && window.scrollMaxY) {
xScroll = window.innerWidth + window.scrollMaxX;
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
if(document.documentElement.clientWidth){
windowWidth = document.documentElement.clientWidth;
} else {
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;
} else {
pageHeight = yScroll;
}
// for small pages with total width less then width of the viewport
if(xScroll < windowWidth){
pageWidth = xScroll;
} else {
pageWidth = windowWidth;
}
arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight);
return arrayPageSize;
};
2 根据页面的高度,去设置 页面中 iframe 或者 div 的高度,这里有个div 或者iframe 的最小高度,iframe的高度一般等于页面的高度减去某一个固定高度,如下面300就是除去div后其他组件的固定高度
function resizeDivOrIFrame(){
document.getElementById("targetDiv").style.height = ___getPageSize[1]-300;
}
3 在页面中 启动一个线程,不断的调用
window.setInterval("resizeDivOrIFrame()", 200);
ps:遇到一个奇怪的问题: 有一个页面是一个带下拉列表搜索的,结果列表的高度一直在增加,不知其解。
分享到:
相关推荐
在 iframe 高度自适应中,需要考虑多种浏览器的兼容性问题,包括 Firefox、IE、Opera 等不同的浏览器。因此,需要使用不同的方法来实现 iframe 高度的自适应。 方法一:使用 JavaScript 控制 iframe 高度自适应 ...
标题“Iframe 高度自适应浏览器高度”涉及的核心知识点是如何让Iframe的大小根据其内容自动调整,特别是高度,以便始终保持与浏览器窗口的高度同步,从而提供更好的用户体验。 首先,我们需要了解Iframe的基本结构...
iFrame 自适应高度的定义是指隐藏 iFrame 的 border 和 scrollbar,让用户无法察觉到它是一个 iFrame。当 iFrame 需要切换页面或执行 DOM 动态操作时,需要程序去同步 iFrame 高度和被包含页的实际高度。 传统的...
### iframe高度自适应知识点详解 在网页开发过程中,经常会遇到需要将一个页面嵌入到另一个页面中的场景,这时就会用到`<iframe>`标签。然而,默认情况下,`<iframe>`的高度是固定的,当其内部内容发生变化时,可能...
因此,实现`iframe`的高度自适应对于优化用户体验、提高页面美观度具有重要意义。 #### 一、需求分析 本案例的目标是实现`iframe`自适应高度的功能,并确保其能够在不同的浏览器环境下正常工作。这里所说的“多种...
在网页制作过程中,Iframe(内联框架)是一种常见的元素,用于在页面中嵌入其他网页或者内容。然而,Iframe的高度自适应往往是一个棘手的问题,因为如果内容动态加载或者不同长度,Iframe默认的高度可能无法适配,...
在探讨“嵌入到HTML的iframe自动适应大小”的主题时,我们主要关注的是如何使一个内嵌在HTML页面中的iframe元素能够根据其内容或者父容器的尺寸动态调整自身的高度,从而实现良好的响应式设计和用户体验。...
自适度div高度,js获取元素位置和窗口高度,自动适应,也可以使用在父框是iframe,有完整的js实例
假设主页面有一个div,里面放置一个iframe 代码如下:<div id=”frameBox”> <iframe id=”frameWin” src=”1.html” name=”opWin” style=”width:100%; height:100% ” frameborder=”0″ scrolling=”no”>...
当遇到"Iframe中页面显示不全"的问题时,通常是由于iframe的尺寸设置不当或者与被嵌入内容的尺寸不匹配导致的。下面将详细探讨如何解决这一问题以及相关的知识点。 首先,我们需要了解`<iframe>`的基本结构和属性。...
然而,当嵌入的内容高度不确定或者会动态变化时,如何让`iframe`的高度自适应其内容,并且不显示不必要的滚动条就成为了一个常见的需求。 #### 知识点解析 ##### 1. iframe元素简介 `iframe`(Inline Frame)是...
当iframe的src属性指向一张图片时,如何让iframe的高度自适应图片的大小,是一个常见且实用的需求。本文将详细介绍一种实现方法,并深入探讨其背后的原理。 #### 实现原理 在标准的iframe高度自适应方案中,通常是...
- **高度自适应**:高度自适应相对复杂,因为`iframe`内容可能动态加载或不同页面高度不一致。一种常见的方法是通过JavaScript动态获取`iframe`内容的高度并设置。 3. **JavaScript实现高度自适应**: 使用...
当主页面和 Iframe 页面不在同一域名时,直接通过 JavaScript 获取对方页面高度的方法会因为跨域限制而失败。 为了解决跨域问题,文中提出了使用中介页面(agent.html)来传递高度信息的解决方案。基本原理是:当...
// 进行Iframe的自动撑开,让所有父页面的Iframe都自动适应包含页高度 function autoHeight() { var doc = document, p = window; while (p = p.parent) { var frames = p.frames, frame, i = 0; while (frame = ...