浮动窗口，右边下拉框为什么可以无限下拉，请高手帮忙！

因为跨域，需要用到iframe嵌套页面，所以采用以下方式，但是右边垂直下拉框可以无限下拉是什么原因呢？
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>页面询问漂浮代码</title>
<style type="text/css">
 /* 底部浮动 */
#wgcss_dingwei { background-position: top center; position: absolute; width:100%;height:94px; z-index: 10000;}
</style>
</head> 
<body>
<p>页面询问漂浮代码</p>
<p>页面询问漂浮代码</p>
<p>页面询问漂浮代码</p>
<p>页面询问漂浮代码</p>
<p>页面询问漂浮代码</p>
<p>页面询问漂浮代码</p>
<p>页面询问漂浮代码</p>
<p>页面询问漂浮代码</p>
<p>页面询问漂浮代码</p>
<p>页面询问漂浮代码</p>
<p>页面询问漂浮代码</p>
<p>页面询问漂浮代码</p>
<p>页面询问漂浮代码</p>
<p>页面询问漂浮代码</p>
<p>页面询问漂浮代码</p>
<p>页面询问漂浮代码</p>
<p>页面询问漂浮代码</p>
<p>页面询问漂浮代码</p><div id="wgcss_dingwei" >
</div>
<script type="text/javascript">
 var frame=document.getElementById('wgcss_dingwei');
 frame.innerHTML="<iframe src='http://www.baidu.com' width='100%' height='100%'></iframe>";
 
function piaofu_div(){
    var bottompiaofu=document.getElementById("wgcss_dingwei");
    bottompiaofu.style.left=(document.documentElement.scrollWidth-bottompiaofu.offsetWidth)/2+"px";
    bottompiaofu.style.top=(document.documentElement.scrollTop+document.body.scrollTop+document.documentElement.clientHeight-bottompiaofu.offsetHeight)+'px';
    
    setTimeout(piaofu_div,1);
}
piaofu_div();</script>    
</body>
</html>

解决方案 »

  1.   

    写错了，不好意思，右边垂直滚动条可以无限下拉
    bottompiaofu.style.top=(document.documentElement.scrollTop+document.body.scrollTop+document.documentElement.clientHeight-bottompiaofu.offsetHeight)+'px';
    这句话前边应该加个if条件判断下，不知道怎么加。
      

  2.   

    frame.innerHTML这句话如果不添加iframe就没事，添加iframe后就一直可以往下拉了
      

  3.   


    啊  ie 里面没事   ff 里面可以无限下拉 不清楚你为什么要 加 setTimeout  这段代码   实现漂浮吗 ?  
      

  4.   

     哪有lz 这样做做的...   在window.scroll 事件里面处理..  没有这么干得
      

  5.   

    因为特殊的原因只能这么做，另外，在跨域的页面整合集成上，这种方式也算是比较正常的啊， 基本都是通过iframe实现的吧
      

  6.   


    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>页面询问漂浮代码</title>
    <style type="text/css">
     /* 底部浮动 */
    #wgcss_dingwei { background-position: top center; position: absolute; width:100%;height:94px; z-index: 10000;}
    </style>
    </head> 
    <body>
    <p>页面询问漂浮代码</p>
    <p>页面询问漂浮代码</p>
    <p>页面询问漂浮代码</p>
    <p>页面询问漂浮代码</p>
    <p>页面询问漂浮代码</p>
    <p>页面询问漂浮代码</p>
    <p>页面询问漂浮代码</p>
    <p>页面询问漂浮代码</p>
    <p>页面询问漂浮代码</p>
    <p>页面询问漂浮代码</p>
    <p>页面询问漂浮代码</p>
    <p>页面询问漂浮代码</p>
    <p>页面询问漂浮代码</p>
    <p>页面询问漂浮代码</p>
    <p>页面询问漂浮代码</p>
    <p>页面询问漂浮代码</p>
    <p>页面询问漂浮代码</p>
    <p>页面询问漂浮代码</p><div id="wgcss_dingwei" >
    </div>
    <script type="text/javascript">
     var frame=document.getElementById('wgcss_dingwei');
     frame.innerHTML="<iframe src='http://www.baidu.com' width='100%' height='100%'></iframe>";
     
    function piaofu_div(){
        var bottompiaofu=document.getElementById("wgcss_dingwei");
        bottompiaofu.style.left=(document.documentElement.scrollWidth-bottompiaofu.offsetWidth)/2+"px";
        bottompiaofu.style.top=(document.documentElement.scrollTop+document.body.scrollTop+document.documentElement.clientHeight-bottompiaofu.offsetHeight)-4+'px';
        
        setTimeout(piaofu_div,1);
    }
    piaofu_div();</script>    
    </body>
    </html>
     可能是高度有点不准确, 进去了 死循环 ..  这样 就行了 
      

  7.   

    还有，请问下，如何实现这个浮动窗口背景透明，通过css能控制吗？
      

  8.   


    http://blog.csdn.net/xkyle/article/details/2454504
      

  9.   

    hey 不用js也可以..
    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>页面询问漂浮代码</title>
    <style type="text/css">
     /* 底部浮动 */
    #wgcss_dingwei { background-position: top center; position: fixed ; width:100%;height:94px; z-index: 10000; left:0px;bottom:0px;}
    </style>
    </head> 
    <body>
    <p>页面询问漂浮代码</p>
    <p>页面询问漂浮代码</p>
    <p>页面询问漂浮代码</p>
    <p>页面询问漂浮代码</p>
    <p>页面询问漂浮代码</p>
    <p>页面询问漂浮代码</p>
    <p>页面询问漂浮代码</p>
    <p>页面询问漂浮代码</p>
    <p>页面询问漂浮代码</p>
    <p>页面询问漂浮代码</p>
    <p>页面询问漂浮代码</p>
    <p>页面询问漂浮代码</p>
    <p>页面询问漂浮代码</p>
    <p>页面询问漂浮代码</p>
    <p>页面询问漂浮代码</p>
    <p>页面询问漂浮代码</p>
    <p>页面询问漂浮代码</p>
    <p>页面询问漂浮代码</p><div id="wgcss_dingwei" >
    </div>
    <script type="text/javascript">
     var frame=document.getElementById('wgcss_dingwei');
     frame.innerHTML="<iframe src='http://www.baidu.com' width='100%' height='100%'></iframe>";
    </script>    
    </body>
    </html>