LC

浏览器的BOM

 
  • 2021年 04月03日
  • 0 阅读

BOM

​ BOM 是 Browser Object Model 的缩写，简称浏览器对象模型, 提供了独立于内容而与浏览器窗口进行交互的对象，用于访问浏览器的功能。DOM 的标准组织是 W3C；但 BOM 没有标准规范，每个浏览器都有自己的标准，那么浏览器共有对象就成了事实的标准，所有一般学习的是共有的内容。

1，是操作浏览器的

2，BOM 里面是存在多个对象的

3，BOM 实际进行操作浏览器是使用多个对象里面的属性以及相关的方法

4，BOM 没有规范，学习的一般是共有对象

一，核心对象：window 对象

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

window对象的属性对象:
    document(核心): 文档对象，让我们可以在js脚本中直接访问页面元素(DOM)
    history(重要): 历史对象,包含窗口的浏览历史，可以实现后退
    location(重要): 包含浏览器当前的地址信息，可以用来刷新本页面或跳转到新页面
    frames: 框架对象，可以获取页面框架内容
    screen: 包含有关客户端显示屏幕的信息
    navigator: 导航对象, 包含所有有关访问者浏览器的信息（最新版本的浏览器不支持）

window 的常用方法及属性

​ 书写上，可以省略 window； window.alert( ) == alert( );

//使用打印可查看所有window的属性和方法
console.log(window);

a，window.innerHeight：获取高度（浏览器可视区域，不是浏览器窗口）

b，window.innerWidth：获取宽度（浏览器可视区域，不是浏览器窗口）

c，alert(text)： 弹出提示框(警告框)，无返回值

d，confirm()： 创建一个需要用户确认的对话框，确认返回 true，取消返回 false

e，prompt(text,defaultInput) ：创建一个对话框要求用户输入信息，返回 string

f，open(url,name,[options]) ： 打开一个新窗口并返回新 window 对象，默认打开新窗口，options 可以设置属性；

g，setInterval()：设置定时器

h，clearInterval() : 移除定时器

i，setTimeOut() : 设置延时器

j，clearTimeOut(): 移除延时器

k，close(): 关闭窗口

l，print(): 调出打印对话框

二，重要 window 对象

1，window.location (重要): 包含浏览器当前的地址信息，可以用来刷新本页面或跳转到新页面

//location 的属性
location.hash; //返回锚点；	有就返回锚点值
location.host; //主机地址；	主机的IP地址
location.hostname; //主机名；	设置用来网络访问的网址地址，网络名字
location.href; //链接地址；		可访问的完整地址
location.port; //端口号;	默认的浏览器占用端口号 80
location.portocol; //协议；	网络协议
location.pathname; //路径名；	获取服务器地址后的路径地址
location.search; //查询字符串；	用来获取？后面的字符串，传递值；
location.origin; //跨域信息

//location 方法
//location本身直接赋值也能实现跳转
location.href = "url"; //通过地址栏来进行页面跳转  给 href 赋值
location.assign("url"); //跳转页面的方法，参数为字符串；     不会删除历史记录；
location.reload(); //默认会从缓存中加载，参数改为 true 会变成从服务器加载；
location.replace("url"); //替换本身的地址来完成跳转，    同时删除本身的历史记录；

2，history(重要): 历史对象,包含窗口的浏览历史，可以实现后退

history.length; //返回历史页面的个数
history.forward(); //前进的方法
history.back(); //后退的功能
history.go(number); //默认自己是 0；可以去任意页面；前进就 加值，后退就 减值；
history.pushState();
//添加一个任意类型数据来进行页面跳转，添加的数据会存入state；可以添加一个新的历史记录； 有三个参数，第一个为数据，第二个为标题，第三个为url；
history.replacepushState(); //替换state值在对应的url中；

3，navigator: 导航对象,获取浏览器的相关信息(了解)

navigator对象的属性;
navigator.appName; //浏览器名称
navigator.appVersion; //浏览器版本
navigator.platform; //操作系统
//最新的浏览器已经全面放弃以上这些属性

//重点是这个
navigator.userAgent; //用户代理信息, 该属性可以获取浏览器及操作系统信息  常用
搜索