我们在项目中的开发标准分辨率是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:遇到一个奇怪的问题: 有一个页面是一个带下拉列表搜索的,结果列表的高度一直在增加,不知其解。
分享到:
相关推荐
自适度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”>...
让嵌入到HTML的iframe自动适应大小
<div u00a0class=”TxtBox”> <iframe frameborder=”0″ scrolling=”no” name=”news1″ id=”news1″ onload=”if(document.frames[‘news1’].document.body.scrollHeight>document.frames[‘news2...
main.htm: <... <head> <... charset=gb2312′ /> <... <...iframe自适应加载的页面高度</title> </head> <body> <div><iframe src=”child.htm”></i
var t = document.createElement(“div”); t[removed] = ‘<iframe id=”kxiframeagent” src=”http://rest.kaixin001.com/api/agent.html#’+dHeight+'”scrolling=”yes” height=”0px” w
利用google-iframe在flex中嵌入网页是在swf上覆盖一个div,flex与网页无法融合,这样会出现各种显示,控制问题,如页面自适应,页面显示控制,内容遮盖,网页内容不随flex滚动条滚动等,现在这些问题都解决了
常用多浏览器不容兼的描述及解决方法 包含:CSS ... iframe高度自适应 、其它特性描述: alt属性 title属性 去掉超链接或按钮点击时的虚框线 border:none;与border:0;的区别 解决IE8下div移位、错位等兼容性问题
1.16 实现左右div自适应相同高度 1.17 获取鼠标在屏幕中的坐标 1.18 获取鼠标在窗口客户区中的坐标 1.19 获取鼠标在窗口页面中的坐标 1.20 设置Flash对象的WMode窗口模式 1.21 实现类Twitter的字数限制效果 1.22 ...
-ExtAspNet支持原生的AJAX,也就是说控件的属性改变在AJAX过程中会反映到页面中,但并不是所有的控件属性都支持AJAX改变。 -加载s.gif图片在本机进行,不会请求extjs.com远程资源(feedback:efrigate43,abaocoole)...
5.8 iframe自适应高度 5.9 类似MSN的消息提示 5.10 只打印iframe的内容 第6章 下拉列表特效 6.1 下拉框实现多选 6.2 实现两个select的同步 6.3 被选中的列表项下次不能再选 6.4 不带滚动条的select 6.5 从一个下拉...
5.8 iframe自适应高度 5.9 类似MSN的消息提示 5.10 只打印iframe的内容 第6章 下拉列表特效 6.1 下拉框实现多选 6.2 实现两个select的同步 6.3 被选中的列表项下次不能再选 6.4 不带滚动条的select 6.5 从一个下拉...
-ExtAspNet支持原生的AJAX,也就是说控件的属性改变在AJAX过程中会反映到页面中,但并不是所有的控件属性都支持AJAX改变。 -加载s.gif图片在本机进行,不会请求extjs.com远程资源(feedback:efrigate43,abaocoole)...
<br>2007/6/25 Version 3.1.5 beta <br>Updates: 1) 修正在VS2005设计模式中无法动态调整控件高度的BUG。 2) 修正height属性无效的BUG。 3) 修正CodeHighlighter外挂插件调用图片位置指向不正确...