BOM

最新推荐文章于 2025-07-04 11:33:13 发布

weiliu92

最新推荐文章于 2025-07-04 11:33:13 发布

阅读量256

点赞数

CC 4.0 BY-SA版权

文章标签： js

本文链接：https://blog.youkuaiyun.com/weiliu92/article/details/49257277

本文详细解析了BOM（浏览器对象模型）中的window对象，包括Document、History、Location、Navigator、Screen等主要组件及其使用方法，以及如何通过window对象获取浏览器位置、大小等信息，并提供了实例演示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

#BOM window对象（浏览器对象模型）

- Document:使我们可以从脚本中对HTML页面的所有元素进行访问。
- History：包含用户（在浏览器窗口中）访问过的URL。、
- Location: 包含有关当前URL的信息。
- Narigator: 包含有关浏览器的信息。
- Screen: 包含有关客户端显示屏幕的信息。

##window 对象
1 浏览器位置

            screenX     screenY    //IE不支持
            screenLeft
            screenTop    // screenTop IE要包括菜单栏。工具栏距离

window.alert("这是一个对话框");<br>

    例子

            window.alert(window.screenX + " " + window.screenY)；
            window.alert(window.screenLeft + " " + window.screenTop);


2 窗口大小（浏览器可见区域尺寸）

            window.innerWidth,windowHeight    (IE不支持)


            document.documentElement.clientWidth
            document.documentElement.clientHeight
            这两种是通用方法

##对象方法

1 窗口移动

            window.moveBy(x,y)
            window.moveTo(x,y)        //将新窗口移动


            window.resizeBy(x,y)
            window.resizeTo(x,y)    //将新窗口变大
2  滚动条控制

            window.scrollBy(x,y)
            window.scrollTo(x,y)
            X值为水平方向移动，Y值为垂直方向

3 时间间隔函数（计时器）

        window.serInterval（code，Millisecond）
        window.clearInterval（code，Millisecond）        //让计数停止

        window.setTimeout（code，Millisecond）
        window.clearTimeout（code，Millisecond）            //计数停止

        setTimeout 指执行一次

        code可以函数式（function）
        millisecond指毫秒

##history 对象

属性： length  访问过的链接个数

- history.back()
- history.forward()
- history.go(number)

#location

属性

    href        返回完整的URL
    hostname    返回URL的主机名
    pathname    返回的URL路径名
    port        返回一个URL服务器使用的端口号
    search        返回一个查询部分

##location 方法

location.assign("URL")        加载一个新文档
location.reload                刷新一个当前文档
location.replace("URL")        用一个新文档取代当前文档（没有历史记录）

##screen     对象

        availHeight        返回屏幕高度（不包括任务栏）
        availWidth        返回屏幕宽度
        width            返回屏幕最大宽度
        height            返回屏幕最大高度

##其他
    window.onload = function(){}    //onload 指HTML文档加载完后调用

    window.open(" "," "," ")
    第一个空填打开地址，默认为打开新窗口
    第二个填怎样打开（新建打开，在自身内打开）等
    第三个填打开窗口的样式（width height 等）