JavaScript 基础（八）【BOM】

亦凉 2023-07-19 10:52 8阅读 0赞

### BOM ###

*  窗口
 *  尺寸
 *  页面跳转
 *  历史
 *  弹窗
 *  计时器
 *  Cookie
 *  存储
 *  浏览器信息window.navigator

**Browser Object Model**  
Js通过浏览器对象模型（BOM）来和浏览器进行交互，可以获取屏幕尺寸，窗口大小，页面地址，历史记录等浏览器相关信息，也可以控制浏览器执行某些行为：弹出信息，页面跳转，打开窗口，关闭窗口，调整窗口大小等。

浏览器对象模型用window对象来表示，所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。DOM 的 document 也是 window 对象的一个属性。

# 窗口 #

window.open() - 打开新窗口
    window.close() - 关闭当前窗口
    window.moveTo() - 移动当前窗口
    window.resizeTo() - 调整当前窗口的尺寸
    注：脚本不能改变非脚本打开的窗口

# 尺寸 #

screen.availWidth		屏幕宽度
    screen.availHeight	屏幕高度
    innerWidth		浏览器窗口宽度
    innerHeight	浏览器窗口高度

# 页面跳转 #

location.hostname 返回 web 主机的域名
    location.pathname 返回当前页面的路径和文件名
    location.port 返回 web 主机的端口 （80 或 443）
    location.protocol 返回所使用的 web 协议（http: 或 https:）
    location.href 属性返回当前页面的 URL。
    通过改变location.href来实现页面跳转
    location.href = "";
    location.replace('http://www.baidu.com') 使用新文档代替旧文档
    location.assign("http://www.baidu.com") 加载一个新文档

# 历史 #

history.forward() 前进
    history.back()   后退
    history.go() 跳转

# 弹窗 #

alert() 警告框 
    confirm() 确认框 
    prompt() 提示框

# 计时器 #

setInterval() 循环执行
    clearInterval() 停止执行
    setTimeout() 一定时间后执行一次
    clearTimeout() 停止执行

# Cookie #

需要登录的网站，在用户登录之后需要记录客户端的用户信息，而不是每访问一个页面都需要重复登录，cookie就用来解决这个问题  
Cookie 是一些数据, 存储于你电脑上的文本文件中。当用户访问 web 页面时，他的信息可以记录在 cookie 中。在用户下一次访问该页面时，可以在 cookie 中读取用户信息。

Cookie 以名/值对形式存储  name=xiaoming;password=123
    当浏览器从服务器上请求 web 页面时,会携带cookie
    Cookie默认在浏览器关闭时删除，也可以自己设置过期时间 expires
    创建 document.cookie = ‘name=xiaoming’
    读取 var x = document.cookie;
    删除 document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

# 存储 #

从服务器获取的数据可以存储在浏览器中，以免重复获取

localStorage	没有过期时间，直到手动删除
    sessionStorage 临时保存，关闭浏览器页面后自动删除

# 浏览器信息window.navigator #

浏览器代号:  navigator.appCodeName  
    浏览器名称:   navigator.appName  
    浏览器版本: navigator.appVersion 
    启用Cookies: navigator.cookieEnabled 
    硬件平台:  navigator.platform 
    用户代理:  navigator.userAgent  
    用户代理语言: navigator.systemLanguage