对象高度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，苹果还是苹果，暴雪还是暴雪，而这些牛人离开了公司，自己什么都不是。

posted @ 2013-04-30 18:02  xinyuyuanm  阅读(280)  评论(0)  编辑  收藏  举报