BOM浏览器对象模型

最新推荐文章于 2025-07-29 11:35:00 发布

原创最新推荐文章于 2025-07-29 11:35:00 发布 · 288 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#浏览器

js 专栏收录该内容

26 篇文章

订阅专栏

本文介绍了浏览器对象模型(BOM)的基本概念及其在网页开发中的应用。覆盖了Window对象的各种属性与方法，如屏幕尺寸获取、窗口操作及位置调整等，并探讨了Location对象的路径管理和History对象的历史记录功能。

BOM

Browser object model的缩写，浏览器对象模型

1.常用对象

Window窗口，浏览器的窗口

定义的全局变量和全局函数都是使用window方法

全局变量是window的属性，可以直接访问window.a。

浏览器的宽度：window.innerWidth

浏览器的高度：window.innerHeight

常用的方法:

Open()打开一个新的窗口，需要三个参数。第一个地址，需要写协议；第二个是打开的方式；第三个是新的浏览器的宽高，可无。如果前面的两个参数都没有，那么打开的就是一个空的窗口。

<body>
<button onclick="openWin()">打开一个新的窗口</button>
<button onclick="closeWin()">关闭一个新的窗口</button>
<button onclick="removeWin()">移动新的窗口</button>
<script>
    function openWin(){
        var myWindow = window.open("http://www.runoob.com","_blank","width = 200,height = 500");
    }
</script>
</body>

Close() 关闭一个新打开的窗口

function closeWin(){
    myWindow.close();
}

moveTo移动窗口，以左上角为起点，同时聚焦

function removeWin(){
    //一个新的窗口的默认位置在左上角
    myWindow.moveTo(200,200);
    myWindow.focus();
}

reSizeTo改变大小

function resizeWin(){
    myWindow.resizeTo(1000,1000);
    myWindow.focus();
}

Screen屏幕也是window下面的对象，在使用是我们可以把Window省略掉。

<script>
    var scrWidth = window.screen.width;
    var scrHeight = window.screen.height;
    document.write("屏幕的宽" + scrWidth + "屏幕的高" + scrHeight);
    var scrAviWidth = screen.availWidth;
    var scrAviHeight = screen.availHeight;
    document.write("<br>");
    document.write("屏幕的宽" + scrAviWidth + "屏幕的高" + scrAviHeight);
</script>

Location：地址

常用的属性：href完整的路径port 端口号pathName路径名protocol 协议

打开一个新的路径

location.assign("http://runoob.com");

刷新：普通刷新/强制刷新

location.reload();

History历史记录

记录当前的历史

Back 返回

Forward 下一页

Go 进入特定的某页 -1是返回

2.弹窗

Alert（）：警告提示框，也是window下的方法，window可以忽略省略不计。

Prompt（）：信息提示输入框，也是window下的方法。当点击确定后才把数值传入

Confirm（）：确认弹窗，点击确定，弹出true，否则flash

3.Cookie

作用：在本地浏览器存储数据，常用于记住账号

组成：键值对的形式

存储的数据：“useId=445：psd=554”

有效期：“expires”截止时间

存储cookie：按照格式写一个字符串，然后将它赋给document.cookie

获取cookie：将cookie解析，得到想要的内容

清除cookie：将存储的cookie有效期改为过去的某一天，是清除cookie。

4.计时器

setInterval(“函数”,”毫秒数”)：计时器，每个多长时间就调用一次。

<body>
<p id="id"></p>
<script>
    setInterval("getTime()",1000);
    function getTime(){
        var time = new Date();
        var hour = time.getHours();
        var minute = time.getMinutes();
        var second = time.getSeconds();
        var id = document.getElementById("id");
        id.innerHTML =hour + ":" + minute + ":" + second;
    }
</script>
</body>

clearInterval():清除计时器

setTimeout()多久之后调用该函数，而且该函数只能调用一次；延时器