常用BOM操作

最新推荐文章于 2025-02-05 16:35:44 发布

huhanghao

最新推荐文章于 2025-02-05 16:35:44 发布

阅读量1.4k

点赞数 1

分类专栏： web开发文章标签： BoM

本文链接：https://blog.youkuaiyun.com/u011486491/article/details/95059323

版权

web开发专栏收录该内容

35 篇文章

订阅专栏

本文深入探讨了浏览器对象模型(BOM)的核心概念与实用技巧，涵盖了window对象的各种属性和方法，如窗口尺寸、位置调整、事件处理等，以及如何使用navigator和screen对象获取浏览器与屏幕信息。此外，还介绍了Location对象的URL属性，事件绑定与取消的方法，以及cookie的读取、设置和删除技巧。

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

常用BOM操作

window常用对象

所有浏览器都支持 window 对象。它表示浏览器窗口。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

window

window尺寸

有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度

对于 Internet Explorer 8、7、6、5：

document.documentElement.clientHeight
document.documentElement.clientWidth

或者

document.body.clientHeight
document.body.clientWidth

其他操作window方法（不常用）

window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸

navigator

浏览器的信息，最常用的属性包括：

navigator.appName：浏览器名称；
navigator.appVersion：浏览器版本；
navigator.language：浏览器设置的语言；
navigator.platform：操作系统类型；
navigator.userAgent：浏览器设定的User-Agent字符串。

screen

屏幕的信息，常用的属性有：

screen.width：屏幕宽度，以像素为单位；
screen.availWidth：屏幕的可用宽度，以像素为单位
screen.height：屏幕高度，以像素为单位；
screen.availHeight：屏幕的可用高度，以像素为单位
screen.colorDepth：返回颜色位数，如8、16、24。

Location

当前页面的URL信息。常用属性有:

location.protocol; // 'http'
location.host; // 'www.example.com'
location.port; // '8080'
location.pathname; // '/path/index.html'
location.search; // '?a=1&b=2'
location.hash; // 'TOP'

事件

常用事件

onload：当页面加载时
onscroll：当页面滚动时
onresize:页面重新定义大小时
onkeydown：当键盘按键按下的时候触发。能够响应用户输入的元素才支持键盘事件，和焦点事件一样。如果按下不抬起来会连续触发。
onkeyup：当键盘按键抬起时触发。
oncontextmenu：当右键菜单显示出来时触发。

事件绑定与取消

事件绑定：

div.addEventListener(事件名称，事件处理函数，捕获/冒泡);

事件取消：

div.removeEventListener(事件名称，事件处理函数，捕获/冒泡)

事件流

具体参考

https://blog.youkuaiyun.com/u011486491/article/details/90266090

cookie

通过cookie向访问者的电脑上存储数据，每个浏览器存储的位置不同，所以不同浏览器存储的cookie不能互相通用。

一个域名下存放cookie的个数是有限制的，不同浏览器存放的个数不同。每个cookie存放的内容大小也是有限制的，也是根据浏览器不同限制也不同。cookie的周期是整个浏览器结束进程的时候。如果想长时间存放一个cookie，需要在设置这个cookie的时候同时给他设置一个过期的时间。当过期后cookie就会被销毁。

获取cookie

function getCookie(key){
    var arr1 = document.cookie.split(';');
    for(var i = 0;i < arr1.length;i++){
        var arr2 = arr1[i].split('=');
        if(arr2[0] == key){
            return decodeURI(arr[1]);
        }
    }
}

设置cookie

function setCookie(key,value,t){
    var oDate = new Date();
    oDate.setDate(oDate.getDate() + t);
    document.cookie = key + '=' + value + ';expires=' + oDate.toGMTString();
}

删除cookie

function removeCookie(key){
    setCookie(key,'',-1);
}