BOM应用(open、close、scrollTop)

最新推荐文章于 2023-02-14 06:26:27 发布

蔡蔡动起来

最新推荐文章于 2023-02-14 06:26:27 发布

阅读量5.2k

点赞数

分类专栏：智能社_js 文章标签： open close scrollTop

本文链接：https://blog.youkuaiyun.com/weixin_40512519/article/details/82768693

版权

智能社_js 专栏收录该内容

22 篇文章

订阅专栏

打开、关闭窗口：

open

<body>
<input type="button" value="打开窗口" onclick="window.open('http://www.baidu.com')"/>
</body>

document.write:先清空然后再写。

<body>
<input type="button" value="write" onclick="document.write('abc')"/><!--一点击按钮 按钮消失 abc出现-->
</body>

点击按钮，运行代码：

 <script>
        window.onload=function(){
            var oTxt=document.getElementById('txt1');
            var oBtn=document.getElementById('btn1');

            oBtn.onclick=function(){
                var oNewWin=window.open('about:blank','_blank');
                oNewWin.document.write(oTxt.value);
               // document.write()--window.document.write()
            }
        }
    </script>
</head>
<body>
<textarea id="txt1" cols="30" rows="10"></textarea> <br/>
<input type="button" value="运行" id="btn1"/>
</body>

火狐中，close只能关闭open打开的窗口。

 <script>
        alert(window.navigator.userAgent);//当前浏览器版本信息
        alert(window.location)//当前页面的地址
 </script>

如果open给self的话就是location.

<body>
<input type="button" value="aaa" onclick="window.location='http://www.zhinengshe.com/';"/>
</body>

尺寸及坐标：

<script>
        document.onclick=function(){
//IE、火狐兼容
            alert(document.documentElement.scrollTop);
//chrome
            alert(document.body.scrollTop);
        }
</script>

<body style="height: 2000px;">
</body>

scrollTop的兼容：

<script>
        document.onclick=function(){
            var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
            alert(scrollTop);
        }
</script>

右下角悬浮框：IE6不认fixed。

 <style>
        #div1{
            width: 100px;
            height: 200px;
            background: red;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        body{
            height: 2000px;
        }

    </style>
    <script>
        //经常重新定位，所以会抖。
        window.onscroll=function(){
            var oDiv=document.getElementById('div1');
            var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
            oDiv.style.top=document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop+'px';

        }
    </script>
</head>
<body>
<div id="div1"></div>

</body>

但是当改变可视区的大小时，悬浮框一开始不会随着变化，那是因为没有重新定位。

 <script>
        //经常重新定位，所以会抖。
        window.onscroll=window.onresize=function(){//window.onresize可视区大小移动时，重新定位
            var oDiv=document.getElementById('div1');
            var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
            oDiv.style.top=document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop+'px';

        }
    </script>

解决抖动的问题：

userAgent>IE6 fixed

IE6 运动