JS浏览器对象怎么操作_JS BOM浏览器对象模型使用方法教程

bom核心包括window、locationhistory对象:window为全局对象,控制窗口操作;location管理URL跳转与刷新;history实现页面导航;navigator和screen提供环境信息。掌握其用法可有效控制浏览器行为,注意replace不可后退、close仅限脚本打开窗口。

JS浏览器对象怎么操作_JS BOM浏览器对象模型使用方法教程

javaScript 中的 BOM(Browser Object Model,浏览器对象模型)是操作浏览器窗口和页面交互的核心。它提供了一系列对象,用来控制浏览器行为,比如导航、弹窗、历史记录等。下面介绍常用的 BOM 对象及其使用方法。

window 对象:浏览器全局对象

window 是 BOM 的顶层对象,代表浏览器窗口。所有全局变量、函数和对象都属于 window。

  • 直接调用 alert(“提示信息”) 实际上是 window.alert()
  • 获取窗口尺寸:
    window.innerWidthwindow.innerHeight 获取可视区域宽高
  • 打开新窗口:
    window.open(“https://www.example.com”, “_blank”, “width=600,height=400”)
  • 关闭当前窗口:
    window.close()(仅限脚本打开的窗口)

location 对象:管理页面地址

location 对象包含当前页面的 URL 信息,可用于跳转或刷新页面。

  • 获取当前 URL:
    location.href
  • 跳转到新页面:
    location.href = “https://www.example.com”location.assign(“https://www.example.com”)
  • 替换当前页面(不可后退):
    location.replace(“https://www.example.com”)
  • 刷新页面:
    location.reload()

history 对象:操作浏览历史

history 对象允许在用户访问过的页面之间导航。

JS浏览器对象怎么操作_JS BOM浏览器对象模型使用方法教程

会译·对照式翻译

会译是一款AI智能翻译浏览器插件,支持多语种对照式翻译

JS浏览器对象怎么操作_JS BOM浏览器对象模型使用方法教程 0

查看详情 JS浏览器对象怎么操作_JS BOM浏览器对象模型使用方法教程

  • 后退一页:
    history.back()history.go(-1)
  • 前进一页:
    history.forward()history.go(1)
  • 跳转到任意历史位置:
    history.go(2) 表示前进两页
  • 获取历史记录数量:
    history.Length

navigator 与 screen 对象:获取环境信息

navigator 提供浏览器相关信息,screen 提供屏幕信息。

  • navigator 常用属性:
    navigator.userAgent —— 获取浏览器标识
    navigator.platform —— 获取操作系统平台
  • screen 常用属性:
    screen.widthscreen.height —— 屏幕分辨率

基本上就这些。掌握 window、location、history 等 BOM 对象,能让你更好地控制页面跳转、用户行为和浏览器交互。不复杂但容易忽略细节,比如 replace 和 assign 的区别,或 close 只对 script 打开的窗口有效。多练习就能熟练使用。

上一篇
下一篇
text=ZqhQzanResources