JavaScript BOM 核心 API 详解:定时器、历史、窗口与导航对象

作者:微光时间:2026-10-29 12:30:38浏览:302

本文系统梳理 JavaScript BOM 核心对象的关键 API。涵盖 setTimeout 与 setInterval 定时器机制、history 历史栈操作、window 窗口位置与尺寸控制,以及 navigator 和 location 等导航信息获取方法。详细解析各属性在不同浏览器中的兼容差异及具体参数用法,帮助开发者高效掌握浏览器端编程基础。

定时器控制:setTimeout 与 setInterval

setTimeout() 方法用于设置延时器,确保指定的代码仅执行一次。

clearTimeout() 方法用于取消之前通过 setTimeout() 设置的延时器。

setIntervla() 方法用于设置定时器,按照指定的时间间隔重复执行代码。

clearInterval() 方法用于清除通过 setInterval() 设置的定时器。

历史记录操作:history 对象

window.history.length 属性用于获取当前会话中访问过的历史页面数量。

window.history.forward() 方法用于在历史记录中向前移动一页。

window.history.back() 方法用于在历史记录中向后移动一页。

window.history.go(-1) 方法用于跳转到历史记录中的指定页面,其中负数值表示向后跳转。

窗口位置与尺寸控制

document.referrer 属性用于获取来源页面的 URL。需注意,该属性仅在两个文件部署于服务器环境时才能正确返回结果;若直接在本地文件夹中打开,或直接在浏览器地址栏输入 b.html 的 URL 地址、或通过打开菜单访问 b.html,则 document.referrer 的值为空字符串。此外,window.moveBy 方法中的 by 表示相对位移,即基于窗口当前位置进行移动。

window.moveTo 方法中的 to 表示绝对位移,即基于屏幕坐标系整体位置进行移动。

window.moveTo 方法还可用于将窗口大小调整为指定的宽度和高度。

window.resizeBy 方法用于将窗口大小增加或减小指定的宽度和高度。

window.screenLeft 与 window.screenX 属性用于获取窗口左侧边缘距离屏幕左侧的距离。

window.screenTop 与 window.screenY 属性用于获取窗口顶部边缘距离屏幕顶部的距离。

窗口位置属性的浏览器兼容性

注:

关于浏览器窗口位置属性的兼容性差异: IE、Chrome、Safari 和 Opera 浏览器支持 window.screenLeft 和 window.screenTop 属性,但 Firefox 不支持这两个属性; Firefox、Chrome、Safari 和 Opera 浏览器支持 window.screenX 和 window.screenY 属性,但 IE 不支持这两个属性。

页面高度与滚动条信息获取

获取页面高度与滚动信息的方法包括: document.body.offsetHeight 或 document.body.clientHeight 用于获取内容高度(即 body 的高度); window.innerHeight 用于在 Chrome 浏览器下获取视口高度; document.documentElement.clientHeught 用于获取浏览器的可视高度; document.documentElement.scrollHeight 用于获取内容的高度(即 HTML 文档的总高度); document.documentElement.scrollTop 用于获取滚动条当前滚动的高度。

窗口操作与状态栏设置

窗口控制与状态栏相关方法包括: window.open 用于打开一个新窗口; window.close 用于关闭窗口; window.defaultStatus 与 window.Status 用于设置或获取状态栏信息。需要注意的是,window.status 获取的是脚本赋予的临时值,而 window.defaultStatus 获取的是默认状态栏文本。

文档属性与导航器信息

其他文档与导航对象属性及方法: document.lastModified 返回文档最后修改时间; document.referrer 返回退回浏览器历史中上一个位置的 URL; document.title 返回当前页面 title 标签内显示的文本; document.URL 返回当前页面的 URL; document.anchors[0].innerHTML 获取页面内第一个锚点的内容; location.reload(false) 该方法强迫浏览器刷新当前页面; navigator.appCodeName 申明浏览器的代码名; navigator.appVirson 返回浏览器的平台和版本信息,该属性是一个只读的字符串; eval 可以处理一段由字符串表示的 JS 代码; encodeURI 用于编码; decodeURI 用于解码。

以上所述即为本文的全部内容,希望对大家有所帮助。

作者最新文章