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