如何正确获取当前口宽度

自己做的一个漂浮广告代码，在谷歌浏览器下一切正常，在ie  火狐下就不正常
最后发现原因 var window_width = $(window).width();//当前窗口的宽度
 var window_height = $(window).height();//当前窗口的高度
这行代码在三个浏览器里取值不一样 火狐是：本段落的偏移是 1440 left 和 107 top。
ie是本段落的偏移是 0 left 和 0 top。谷歌是本段落的偏移是 1440 left 和 799 top。
怎么才能不判断浏览器 有效的解决这个问题呢
<html>
<head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">   
<script type="text/javascript" src="jquery-1.9.0.js"></script>
<script> 
$(document).ready(function(){  sssss();//页面加载完成后执行sssss
});
 var T_step=1;
 var L_step=1;
function sssss(){
 var obj = $("#float_younker");
 var scroll_left=$("body").scrollLeft(); //滚动条向右滚动的距离
 var scroll_top=$("body").scrollTop();//滚动条向下滚动的距离
 var window_width = $(window).width();//当前窗口的宽度
 var window_height = $(window).height();//当前窗口的高度
 var obj_width = obj.width(); //当前漂浮对象的宽度
 var obj_height =obj.height(); //当前漂浮对象的高度
 var obj_left = parseInt(obj.css("left"));//当前漂浮对象距离body体左边距离
 var obj_top = parseInt(obj.css("top"));//当前漂浮对象距离body体顶部距离
 if(obj_left>window_width+scroll_left-obj_width){L_step=-1;}//如果漂浮对象距离body体左边距离超出了窗口右侧滚动条，变为步进递减
 if(obj_top>window_height+scroll_top-obj_height){T_step=-1;}//如果漂浮对象距离body体顶部距离超出了窗口下边，变为步进递减
 if(obj_left<scroll_left){L_step=1;}//如果对象到了当前窗口最左边，步进递增
 if(obj_top<scroll_top){T_step=1;}//如果对象到了当前窗口做顶部  步进递增
 obj_left = obj_left+(3*L_step); 
 obj_top = obj_top+(3*T_step);
 $("#float_younker").stop().animate({"left":obj_left,"top":obj_top},1);
 $(".html_").html(obj_top);
 $("#span1").text(window_width);
 $("#span2").text(window_height);
 
setTimeout("sssss()",.5);
};
 
</script>
</head >
<body>
<div id="float_younker" style="position:absolute;left:100px;top:600px;margin:0;padding:0">
<a href="#" target="_blank">
<img  alt="javascript 图片漂浮广告代码"  src="a.jpg" border="0">
</a>
</div>
<div class="html_"></div>
<p>本段落的偏移是 <span id="span1">unknown</span> left 和 <span id="span2">unknown</span> top。</p>
<button>获得 offset</button>
</body>
</html>JavaScriptHTML浏览器

解决方案 »

  1.   

    设置样式
    <style type="text/css">
    html , body { height:100%; }
    </style>
    然后用这人上试试
    var window_width = $(document.body).outerWidth(true)//当前窗口的宽度
    var window_height = $(document.body).outerHeight();//当前窗口的高度 
      

  2.   

    function getStyle(dom){
    var style="";
    if(document.defaultView&&document.defaultView.getComputedStyle){
    style=document.defaultView.getComputedStyle(dom);
    }else{
    style=dom.currentStyle;
    }
    style={
    'left':style.left=="auto"?dom.offsetLeft:style.left,
    'top':style.top=="auto"?dom.offsetTop:style.top
    }
    return style;
    }
    window.onload=function(){
    var p=document.getElementsByTagName("p")[0];
    var s1=document.getElementById("span1");
    var s2=document.getElementById("span2");
    var style=getStyle(p);
    s1.innerHTML=style.left;
    s2.innerHTML=style.top;
    }
    这样试试