【JavaScript】浏览器对象(BOM)

基本概念

  1. BOM是Browser Object Model的缩写,简称浏览器对象模型
  2. BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性
  3. 基本的BOM体系结构图
  4. 能利用BOM做什么?

    BOM提供了一些访问窗口对象的一些方法,我们可以用它来移动窗口位置,改变窗口大小,打开新窗口和关闭窗口,弹出对话框,进行导航以及获取客户的一些信息如:浏览器品牌版本,屏幕分辨率。但BOM最强大的功能是它提供了一个访问HTML页面的一入口——document对象,以使得我们可以通过这个入口来使用DOM的强大功能!!!

window对象的方法和属性

    window对象是浏览器窗口对文档提供的一个现实的容器,代表打开的浏览器窗口,是每一个加载文档的父对象

    window的属性和方法调用方法:window.属性,window.方法
    也可以直接调用省略 window.

    • 对话框

      1. alert() 显示带有一段消息和一个确认按钮的警告框。
      2. confirm() 显示可提示用户输入的对话框。返回值为布尔值
      3. prompt() 显示带有一段消息以及确认按钮和取消按钮的对话框。
        第一个参数是提示,第二个参数是默认值;
        返回值为输入的值,取消返回null
    • 窗体控制

      1. open() 打开一个新的浏览器窗口或查找一个已命名的窗口。
        1. URL:声明了要在新窗口中显示的文档的 URL。
        2. name:声明了新窗口的名称或者窗口目标。
        3. features:声明了新窗口要显示的标准浏览器的特征。
          • 窗口的属性:
            1. 常用:
              • width:新建窗口宽度
              • heigth:新建窗口高度
              • top:左上角垂直坐标
              • left:左上角水平坐标
            2. 其他不太常用的属性:
              • toolbar:指定窗口是否有标准工具栏。当该选项的值为1或yes时,表示有标准工具栏,当该选项的值为0或no时,表示没有标准工具栏;
              • resizable:指定窗口是否可改变大小,选项的值及含义与toolbar相同;
              • ocation:指定窗口是否有地址工具栏,选项的值及含义与toolbar相同;
              • directories:指定窗口是否有链接工具栏,选项的值及含义与toolbar相同;
              • status:指定窗口是否有状态栏,选项的值及含义与toolbar相同;
              • menubar:指定窗口是否有菜单,选项的值及含义与toolbar相同;
              • scrollbar:指定当前窗口文档大于窗口时是否有滚动条,选项的值及含义与 toolbar相同;
              • ........
      2. close() 关闭浏览器窗口。
    • 定时器

      1. setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式。
      2. setTimeout() 在指定的毫秒数后调用函数或计算表达式。
      3. clearInterval() 取消由 setInterval() 设置的 timeout。
      4. clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
    • 其他方法

      1. print() 打印当前窗口的内容。
      2. blur() 把键盘焦点从顶层窗口移开。
      3. createPopup() 创建一个 pop-up 窗口。
      4. focus() 把键盘焦点给予一个窗口。
      5. moveBy() 可相对窗口的当前坐标把它移动指定的像素。
      6. moveTo() 把窗口的左上角移动到一个指定的坐标。
      7. resizeBy() 按照指定的像素调整窗口的大小。
      8. resizeTo() 把窗口的大小调整到指定的宽度和高度。
      9. scrollBy() 按照指定的像素值来滚动内容。
      10. scrollTo() 把内容滚动到指定的坐标。

    Window 对象属性

    • 掌握部分
      • innerWidth 返回窗口的文档显示区的宽度。
      • innerHeight 返回窗口的文档显示区的高度。
    • 了解部分
      • name 设置或返回窗口的名称。
      • opener 返回对创建此窗口的窗口的引用。
      • closed 返回窗口是否已被关闭。
      • self 返回对当前窗口的引用。
      • top 返回最顶层的先辈窗口。
      • outerheight 返回窗口的外部高度。
      • outerwidth 返回窗口的外部宽度。
      • status 设置窗口状态栏的文本。
      • ......

History对象的常用方法

    history对象有back和forward两个方法,它可以跳转到当前页的上一页和下一页,可以用length属性查看客户端浏览器的历史列表中访问的网页个数

  • back() 加载 history 列表中的前一个 URL。
  • forward() 加载 history 列表中的下一个 URL。
  • go() 加载 history 列表中的某个具体页面。

Location 对象

  • Location 对象的属性
    • href 设置或返回完整的 URL。
    • host 设置或返回主机名和当前 URL 的端口号。
    • hash 设置或返回从井号 (#) 开始的 URL(锚)。
    • hostname 设置或返回当前 URL 的主机名。
    • pathname 设置或返回当前 URL 的路径部分。
    • port 设置或返回当前 URL 的端口号。
    • protocol 设置或返回当前 URL 的协议。
    • search 设置或返回从问号 (?) 开始的 URL(查询部分)。
  • Location 对象的方法
    • assign() 加载新的文档。
    • reload() 重新加载当前文档。

      如果该方法没有规定参数,或者参数是 false,它就会用 HTTP 头 If-Modified-Since 来检测服务器上的文档是否已改变。如果文档已改变,reload() 会再次下载该文档。如果文档未改变,则该方法将从缓存中装载文档。这与用户单击浏览器的刷新按钮的效果是完全一样的。

      如果把该方法的参数设置为 true,那么无论文档的最后修改日期是什么,它都会绕过缓存,从服务器上重新下载该文档。这与用户在单击浏览器的刷新按钮时按住 Shift 健的效果是完全一样。

    • replace() 用新的文档替换当前文档。

      replace() 方法不会在 History 对象中生成一个新的记录。当使用该方法时,新的 URL 将覆盖 History 对象中的当前记录。

Screen 对象

  • availHeight 返回显示屏幕的高度 (除 Windows 任务栏之外)。
  • availWidth 返回显示屏幕的宽度 (除 Windows 任务栏之外)。
  • height 返回显示屏幕的高度。
  • width 返回显示器屏幕的宽度。
  • bufferDepth 设置或返回调色板的比特深度。
  • ......

Navigator 对象属性

  • appCodeName 返回浏览器的代码名。
  • appMinorVersion 返回浏览器的次级版本。
  • appName 返回浏览器的名称。
  • appVersion 返回浏览器的平台和版本信息。
  • cookieEnabled 返回指明浏览器中是否启用 cookie 的布尔值。
  • userAgent 返回由客户机发送服务器的 user-agent 头部的值
  • onLine 返回指明系统是否处于脱机模式的布尔值。
  • ......
点赞

发表评论

电子邮件地址不会被公开。必填项已用 * 标注