本文系统梳理 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 用于解码。
以上所述即为本文的全部内容,希望对大家有所帮助。