BOM（Browser Object Model）浏览器对象模型

最新推荐文章于 2024-08-22 23:42:23 发布

傻乎乎的小不点

最新推荐文章于 2024-08-22 23:42:23 发布

阅读量120

点赞数 4

文章标签： java 前端 javascript

本文链接：https://blog.youkuaiyun.com/m0_62697897/article/details/127173405

版权

1.window对象

（1）窗口位置

<1>screenLeft 返回浏览器窗口左上角相对于当前屏幕左上角的水平距离，不兼容FF浏览器

<2>screenTop 返回浏览器窗口左上角相对于当前屏幕左上角的垂直距离，不兼容FF浏览器

<3>screenX 功能同screenLeft，兼容FF

<4>screenY 功能同screenTop，兼容FF

（2）窗口大小（IE9以下不兼容）

<1>innerWidth 返回网页在当前窗口中可见部分的宽度，包含滚动条宽度

<2>innerHeight 返回网页在当前窗口中可见部分的高度，包含滚动条高度

<3>outerWidth 返回浏览器窗口宽度，包含浏览器菜单和边框

<4>outerHeight 返回浏览器窗口高度，包含浏览器菜单和边框

（3）打开窗口

<1>window.open()

1)打开一个新的浏览器窗口，接受四个参数

(URL/打开方式/窗口参数/是否取代当前页面历史记录的布尔值)

2)第三个参数实例 width=500,height=500

<2>window.close() 关闭新打开的窗口（仅限open()打开的窗口）

2.window子对象

（1）screen对象

<1>功能：包含显示设备的信息

<2>个别属性距离：

1）screen.height、screen.width返回设备的分辨率

2）screen.availWidth、screen.avaiHeight返回屏幕可用宽高，值为屏幕的实际大小减去操作系统某些功能占据的空间的，如系统任务栏

（2）location对象

<1>功能保存当前文档信息、将URL解析为独立片段

<2>属性

1）href

1>返回当前页面完整的URL

2>修改这个属性，即跳转新页面

2）hash 返回URL中的hash（#号后跟零或多个字符）

3）host 返回服务器名称和端口号

4）port 返回服务器端口号

5）pathname 返回URL中的目录和文件名

6）hostname 返回不带端口号的服务器名称

7）protocol 返回页面使用的协议（http://或https://）

8）search 返回URL的查询字符串，字符串以问号开头

（3）navigator对象

<1>提供一系列属性用于检测浏览器

<2>onLine 是否联网

<3>userAgent

1)浏览器嗅探

2)检测浏览器的类型

（4）history对象

<1>功能：保存用户上网的历史记录

<2>方法、属性

1)go() 在用户历史记录中任意跳转，接受一个参数，表示前后跳转页数的整数值（后退一页-1，前进一页1），也可传字符串参数，跳转到第一个包含该字符串的位置

2)back() 后退

3)forward() 前进

4)length 属性保存历史记录的数量

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习practice</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .father{
            width: 200px;
            height: 300px;
            background-color: aqua;
            overflow-x: hidden;
        }
        .father div{
            width: 300px;
            height: 600px;
            background-color: blueviolet;
        }
        p{
            line-height: 50px;
        }
        button{
            width: 100px;
            margin-left: 30px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div>
            <p>你</p>
            <p>怎</p>
            <p>么</p>
            <p>那</p>
            <p>么</p>
            <p>调</p>
            <p>皮</p>
        </div>
    </div>
    <button>biubiubiu</button>
</body>
<script>
    // 1.获取元素
    var fat=document.querySelector('.father');
    var btn=document.querySelector('button');

    // 初始速度
    var i=0;
    // 2.绑定事件
    btn.onclick=function()
    {
        // fat.scrollHeight=300;
        // 开启定时器
        var time1=setInterval(function(){
            i++;
            console.log(i);
            // 当i加到300   将定时器关掉
            if(i==300)
            {
                clearInterval(time1);
            }
            fat.scrollTop=i;  
        }, 10);
        
    }
</script>
</html>

运行结果：

点击biubiubiu按钮前：点击biubiubiu按钮后：