JS学习笔记08-浏览器BOM

一、BOM基础

1.1 打开窗口

点击按钮，即可打开一个标签页并且四指定的目网址

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

用法二：
打开窗口，并且往里边添加内容

<body>
    <textarea id="txt1" cols="100" rows="40"></textarea>
    <input type="button" value="运行" id="btn1">
</body>

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

        btn1.onclick=function(){
            //_black  打开新窗口
            //_self   当前窗口
            var Newwin = window.open('about:blank','_balck')
            Newwin.document.write(txt1.value);
        }
    }
</script>

这样子的话，我们可以把txt1 文本域的东西，直接给他添加到新打开的窗口当中

1.2 关闭窗口

window.close()
点击该按钮后，即可关闭当前窗口

<body>
    <input type="button" value="close" onclick="window.close();">
</body>

注意：

IE下会弹出警告框
Firefox 会直接error

解决办法：

需要使用window.open()打开，才能使用window.close()关闭

1.3 常用属性

1.3.1 window.navigator.userAgent 浏览器信息客户端信息

userAgent里边包含了很多跟浏览器相关的信息。常用来判断浏览器类型

如果想来判断其中内容，可以用navigator.userAgent.match()或navigator.userAgent.indexOf()来判断
前者一般是用来判断手机客户端，例如navigator.userAgent.match(/iPhone/i) , navigator.userAgent.match(/Safari/i)
后者用来变向判断userAgent字符串中某值是否存在，例如 navigator.userAgent.indexOf(“iPhone OS 4_0_2”) !=-1

<script>
    alert(window.navigator.userAgent);
</script>

1.3.2 window.location url信息

当前页面的浏览器地址，可以使用 location 来设置页码

下面这段会弹出当前浏览器地址

<script>
    alert(window.location);
</script>

这段代码的作用是，当我们点击该按钮后，会跳转到百度首页

<body>
    <input type="button" value="跳转" onclick="window.location='https://www.baidu.com'">
</body>

1.4 补充知识

补充一点知识： window.write()
如果是当作事件来用的话，document.write(‘abc’);
会把页面上所有元素都删除，只剩下abc

二、尺寸及座标

可视区：不包括 顶部的书签栏 以及底部的滚动条

2.1 clientWidth; 可视区的宽度

2.2 clientHeight；可视区的高度

<body>
    <input type="button" value="可视区大小" id="btn1">
</body>
<script>
    window.onload=function(){
        var btn = document.getElementById('btn1');
        btn.onclick=function(){
            alert('宽:'+document.documentElement.clientWidth);//1536
            alert('高:'+document.documentElement.clientHeight);//772
        }
    }
</script>

2.3 scrollTop 到页面顶端的距离(可写)

当页面往下滚动的时候，scrollTop的值在不断增大

<body style="height: 2000px;">
    
</body>
<script>
    window.onload=function(){
        document.onclick=function(){
            alert(document.documentElement.scrollTop);
        }
    }
</script>

2.4 offsetTop:元素到offsetParent顶部的距离

1、 offsetParent：距离元素最近的一个具有定位的祖宗元素（relative，absolute，fixed），若祖宗都不符合条件，offsetParent为body。如下图所示：获取child的offsetTop，图1的offsetParent为father，图2的offsetParent为body。

2、注意：只有元素show（渲染完成）才会计算入offsetTop，若是中间有元素数据需要异步获取，会导致最终获取的offsetTop值偏小

2.5 offsetLeft 元素与上一级定位元素的距离

offsetLeft值跟offsetTop值的获取跟父级元素没关系，而是跟其上一级的定位元素(除position:static;外的所有定位如fixed,relative,absolute)有关系。

2.6 offsetHeight 元素的高度只读(不包括margin)

包括padding、border、水平滚动条，但不包括margin的元素的高度。
对于inline的元素这个属性一直是0，单位px，只读元素。

三、常用方法和事件

3.1 系统对话框

3.2 window对象常用事件

3.2.1 .onscroll 当页面滚动的时候触发事件

3.2.2 .onresize 当窗口改变大小的时候触发事件

使用JS实现让元素固定在某个位置。

<body>
    <div id="div1"></div>
</body>

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

<script>
    window.onscroll=function(){
        var scrollTop = document.documentElement.scrollTop;
        var div = document.getElementById('div1');

        div.style.top=document.documentElement.clientHeight-div.offsetHeight+scrollTop+'px';
    }
</script>

效果：

四、系统对话框

4.1 confirm() 弹出带有确认，与取消的按钮

<body>
    <p id="demo"></p>
</body>

<script>
    window.onload=function(){
        var p = document.getElementById('demo');
        var r = window.confirm('您确定要删除吗？')
        if(r==true){
            p.innerHTML='您按下了确定按钮！';
        }else{
            p.innerHTML='您按下了取消按钮!';
        }
    }
</script>

**
**

4.2 prompt() 弹出带有输入框的提示框

<body>
    <p id="demo"></p>
</body>

<script>
    window.onload=function(){
        var result = prompt('请输入您的姓名:','null')
        document.getElementById("demo").innerHTML=result;
    }
</script>

發表評論

所有評論

還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.