JavaScript基础——BOM浏览器对象模型-白红宇

JavaScript基础——BOM浏览器对象模型

阅读量：607 次

发布时间：2019-03-12

本文共 1778 字，大约阅读时间需要 5 分钟。


   
    
     
      
  
      
     
     
     
      
  
      
     
     
     
      
      目录
      
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     浏览器对象模型 (BOM)使 JavaScript 有能力与浏览器对话。BOM通过一组对象实现对浏览器的操作。
     
     BOM 提供了多个关键对象，用于控制和获取浏览器的特性。我们将逐一探讨这些对象的功能及其应用。
     
     Window
     
     Window 代表整个浏览器窗口，同时也是 JavaScript 的全局对象。作为全局对象，它涵盖了所有 JavaScript 函数和变量。
     
     全局变量和函数都会成为 window 对象的属性和方法。这使得我们可以通过 window 对象直接操作浏览器窗口的属性。
    
    
    常见的 window 方法包括：
    
     window.innerHeight - 返回浏览器内部的高度（包括滚动条）
     window.innerWidth - 返回浏览器内部的宽度（包括滚动条）
     window.open() - 打开新浏览器窗口
     window.close() - 关闭当前浏览器窗口
     window.moveTo(x,y) - 调整当前窗口的位置
     window.resizeTo(w,h) - 调整当前窗口的尺寸
    
    
    Navigator
    
    Navigator 是获取浏览器信息的核心对象。通过 Navigator，我们可以识别用户使用的浏览器类型和版本。
    
    Navigator 提供了多个属性来获取浏览器信息：
    
     appCodeName - 浏览器的代号
     appName - 浏览器名称
     appVersion - 浏览器版本
     cookieEnabled - 是否启用 cookie
     platform - 硬件平台
     systemLanguage - 系统语言
     userAgent - 用户代理信息
    
    
    例如，可以通过 Navigator 获取浏览器信息并显示在指定的位置：
    
     
     
    
    
    Location
    
    Location 对象用于处理浏览器地址栏信息或实现页面跳转。它提供了获取和操作 URL 的关键属性。
    
    Location 的主要属性包括：
    
     hostname - 返回 web 主机的域名
     pathname - 返回当前页面的路径和文件名
     port - 返回 web 主机的端口（如 80或443）
     protocol - 返回使用的 web 协议（http:或https:
    
    
    通过 Location 对象可以获取当前页面的 URL 组件，或者实现页面跳转功能。
    
    History
    
    History 对象控制浏览器的历史记录。它允许我们通过方法操作历史记录，但需注意隐私问题。
    
    History 对象主要提供以下方法：
    
     back() - 前进到历史记录中的上一页
     forward() - 前进到历史记录中的下一页
    
    
    due to隐私 reasons，History 对象无法获取具体的历史记录，只能用于前后翻页操作。
    
    Screen
    
    Screen 对象提供用户屏幕信息，主要用于获取屏幕尺寸和输出设备信息。
    
    常用属性包括：
    
     availWidth - 可用宽度
     availHeight - 可用高度
    
    
    例如，可以获取屏幕的可用尺寸并显示结果：
    
     
    
    
    希望以上内容对您有所帮助。欢迎留言讨论。