对象高度iframe 自适应大小
在写这篇文章之前,xxx已经写过了几篇关于改对象高度主题的文章,想要了解的朋友可以去翻一下之前的文章
前提:
W3C准标:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
全局css:
<style> html,body{height:100%;width:100%} iframe{width:100%} </style>
1.首先控制全部窗口的巨细,如果化变,要自适应
var originalWidth = document.documentElement.clientWidth; var originalHeight = document.documentElement.clientHeight; window.onresize = function(){ var _originalWidth = document.documentElement.clientWidth; var _originalHeight = document.documentElement.clientHeight //if (_originalWidth*_originalHeight!=originalWidth*originalHeight <= originalWidth || _originalHeight <= originalHeight||_originalWidth > originalWidth || _originalHeight > originalHeight){ if(_originalWidth*_originalHeight != originalWidth*originalHeight){ $("#clientframe").height(_originalHeight-73);//73:面前iframe的高度 } originalWidth = _originalWidth; originalHeight = _originalHeight; }
2.控制iframe巨细 ,如果窗口化变,要自适应
<tr> <td width="100%" height="" id="ClientTD" align="top"> <iframe src="<%=request.getContextPath()%>/html/com/menu/blank.html" width="100%" height="100%"style="" scrolling="auto" id ="clientframe" frameborder="0" name="clientframe" onload="expression4Firefox(this);getIframeHeight()"></iframe> </td> </tr>
注意:关于一个document.documentElement.clientWidth为0的问题
原来是W3C的准标在作祟啊
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
如果在页面中添加这行记标的话 在IE中:
document.body.clientWidth ==> BODY对象度宽
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域度宽
document.documentElement.clientHeight ==> 可见区域高度
在FireFox中:
document.body.clientWidth ==> BODY对象度宽
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域度宽
document.documentElement.clientHeight ==> 可见区域高度
?
在Opera中:
document.body.clientWidth ==> 可见区域度宽
document.body.clientHeight ==> 可见区域高度
document.documentElement.clientWidth ==> 页面对象度宽(即BODY对象度宽加上Margin宽)
document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)
而如果没有义定W3C的准标,则
IE为:
document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0
FireFox为:
document.documentElement.clientWidth ==> 页面对象度宽(即BODY对象度宽加上Margin宽)document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)
Opera为:
document.documentElement.clientWidth ==> 页面对象度宽(即BODY对象度宽加上Margin宽)document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)
文章结束给大家分享下程序员的一些笑话语录:
很多所谓的牛人也不过如此,离开了你,微软还是微软,Google还是Google,苹果还是苹果,暴雪还是暴雪,而这些牛人离开了公司,自己什么都不是。