BOM

Andresen
28 阅读4分钟

关于我成长为前端高级工程师的前进之路

BOM

BOM 是Browser Object Model的缩写，简称浏览器对象模型, 提供了独立于内容而与浏览器窗口进行交互的对象，用于访问浏览器的功能。BOM由一系列相关的对象构成，并且每个对象都提供了一些方法与属性. 我们可以通过这些属性和方法去对浏览器进行操作.

用js操作浏览器的 前进 后退 刷新 打印 关闭 打开 ...等功能

JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C, 但是BOM缺乏标准.由于BOM 缺少规范，每个浏览器提供商又按照自己想法去扩展它，那么浏览器共有对象就成了事实的标准。

window对象

window对象是BOM的核心, window对象表示浏览器窗口的一个对象, 每个浏览器窗口都有一个window对象与之对应.

window对象是BOM的顶层(核心)对象，所有对象都是通过它延伸出来的.

image.png

window对象的属性对象

document(核心)

  • 文档对象，让我们可以在js脚本中直接访问页面元素(DOM)

history(重要)

  • 历史对象,包含窗口的浏览历史，可以实现后退
    • history.forward() 前进
    • history.back()后退
    • history.go() 参数=1,前进;参数=0,刷新;参数=-1,后退
    • 有历史记录才可以前进或是后退

location(重要)

  • 包含浏览器当前的地址信息，可以用来刷新本页面或跳转到新页面

完整的地址如下图 image.png

  • 常用的端口号有:

    • http协议:默认端口号为80
    • https协议:默认端口号为443
    • mysql:默认端口号为3306

  • location获取地址栏信息的方法:

// encodeURIComponent   编码（理解成：乱码）
// decodeURIComponent   解码（理解：使中文能正常显示）
console.log(location.href)  //完整路径，有乱码
console.log(decodeURIComponent(location.href))  //完整路径解码
console.log(location.protocol)  //协议
console.log(location.host); //主机名称+端口号
console.log(location.hostname);     //主机名称
console.log(location.port);     //端口号
console.log(encodeURIComponent("你好！"))   //%E4%BD%A0%E5%A5%BD%EF%BC%81
console.log(decodeURIComponent("%E4%BD%A0%E5%A5%BD%EF%BC%81")); //你好
console.log(location.path)  //undefined
console.log(location.pathname)  //路径名称
console.log(decodeURIComponent(location.pathname))//将路径名称正常显示
console.log(location.search)    // ?+query
console.log(location.hash); //锚点
  • location的跳转方式:
 //实现页面跳转的方式4个
location.href = "http://baidu.com";
location = "http://qq.com";
location.replace("http://baidu.com"); //replace跳转没有历史记录,所以不能回退
location.assign("http://baidu.com");
  • location的刷新方式:
//页面刷新
location.reload();

frames

  • 框架对象，可以获取页面框架内容

screen

  • 包含有关客户端显示屏幕的信息

navigato

  • 导航对象, 包含所有有关访问者浏览器的信息

  • 当前浏览器版本的信息,操作系统的信息

  • 方法:

    • navigator.userAgent (重点）
    • navigator.appCodeName （了解）
    • navigator.appName （了解）
    • navigator.appVersion （了解）

  • 使用navigator.userAgent获取的信息太过繁琐和杂乱，我们一般要获取的是前浏览器版本的信息,操作系统的信息，上网搜现成的方法就可以获取到包含这两个数据的对象，如下代码:

    function getBrowserInfo() {
        const userAgent = navigator.userAgent.toLowerCase()
        // 检查userAgent以确定浏览器类型
        const isIE = userAgent.includes('msie') || userAgent.includes('trident')
        const isEdge = userAgent.includes('edg/')
        const isFirefox = userAgent.includes('firefox/')
        const isChrome = userAgent.includes('chrome/')
        const isSafari = userAgent.includes('safari/') && !isChrome

        // 从userAgent中提取版本号
        const version = (
          (isIE && userAgent.match(/(msie|rv:)\s?([\d.]+)/)?.[2]) ||
          (isEdge && userAgent.match(/edg\/([\d.]+)/)?.[1]) ||
          (isFirefox && userAgent.match(/firefox\/([\d.]+)/)?.[1]) ||
          (isChrome && userAgent.match(/chrome\/([\d.]+)/)?.[1]) ||
          (isSafari && userAgent.match(/version\/([\d.]+)/)?.[1]) ||
          ''
        )

        // 根据浏览器类型返回名称
        const name = (
          (isIE && 'ie') ||
          (isEdge && 'Edge') ||
          (isFirefox && 'Firefox') ||
          (isChrome && 'Chrome') ||
          (isSafari && 'Safari') ||
          ''
        )

        // 返回包含浏览器名称和版本号的对象
        return {
          name,
          version
        }
      }

window对象的方法

alert(text): 弹出提示框(警告框)

confirm(): 创建一个需要用户确认的对话框

prompt(text,defaultInput) : 创建一个对话框要求用户输入信息

open(url,name,[options]) : 打开一个新窗口并返回新 window 对象

window.open(): 打开指定的网址url.

open()打开

  • _self 在当前窗口打开
  • _parent 在当前窗口打开
  • _blank 打开新的窗口
 open("http://baidu.com","_self") //从当前页面打开
 open("http://baidu.com","_blank")   //从新窗口打开
 open("http://baidu.com","_parent")  //从当前页面打开

一般可以接受三个参数:

(1. 要加载的URL 2. 窗口的名称 或者 窗口的目标 3. 一个特性的字符串)

open(“http://www.baidu.com”);	           //新建页面并打开百度
open(“http://www.baidu.com”, “baidu”);       //新建页面并打开百度,窗口命名为baidu
open(“http://www.baidu.com”, “_parent”);    //在本页窗口打开, _blank是新建(默认)
注: 不命名会每次打开新窗口，命名的第一次打开新窗口,之后在这个窗口中加载。

第三个字符串参数: 
width/height:  新窗口的宽度和高度, top/left: 新窗口的Y坐标和X坐标 
open(‘http://www.baidu.com’, ‘baidu’,‘width=400,height=400,top=200,left=200’ );

opener: 父窗口对象
document.onclick = function(){
     opener.document.write("调用父窗口对象输出!");
}

setInterval(): 设置定时器

clearInterval() : 移除定时器

setTimeOut() : 设置延时器

clearTimeOut(): 移除延时器

close(): 关闭窗口

print(): 调出打印对话框

window对象的属性和方法的调用

window对象的属性和方法的调用方式，可以使用 window.属性、window.方法()或者一般可以直接使用: 属性、方法()的方式调用。

例如：window.alert() 和 alert()效果是一样的

avatar
文章
阅读
粉丝