一、window对象
（一）常见方法
a. 打印方法
1) log() 以日志形式
window.console.log( ' 日志 ' ) // 以 日志 形式打印 2) error 以 错误 的形式
window.console.error( ' 错误 ' ) // 以 错误 形式打印 3) warn 以 警告 的形式
window.console.warn( ' 警告 ' ) // 以 警告 形式打印 4) info 以 消息 的形式
window.console.info( ' 消息 ' ) // 以 消息 形式打印 5) debug 以 测试 的形式
window.console.debug( ' 测试 ' ) // 以 测试 形式打印 b. 弹窗方法
1) alert() 提示窗
alert( ' 提示窗 ' ) // 弹出提示窗 2) confirm() 交互窗
var isTrue = confirm( ' 交互窗 ' ) // 弹出交互窗( Boolean类型 ) ，用户确认是 true，取消是 false； console.log( isTrue ) // true/false 3) prompt() 输入窗
var str = prompt( ' 输入窗 ' ) // 输入窗口，返回的字符串 console.log( typeof str ) // string类型 c. 打开/关闭窗口
window.open ( url , name , [ options ] ); // 地址，title， 设置的参数（窗口的高度 宽度...）target(打开方式 _blank _self _parent) window.close( ); // 关闭自己 eg:
open( 'http://www.baidu.com' , '百度' , 'width=100,hright=200' ) // 打开一个百度官网( 宽100，高200 ) close()； // 关闭了自己这个窗口 // open 还要很多其他options选项 // height=100 窗⼝⾼度； // width=400 窗⼝宽度； // top=0 窗⼝距离屏幕上⽅的象素值； // left=0 窗⼝距离屏幕左侧的象素值； // toolbar=no 是否显⽰⼯具栏，yes为显⽰； // menubar，scrollbars 表⽰菜单栏和滚动栏。 // resizable=no 是否允许改变窗⼝⼤⼩，yes为允许； // location=no 是否显⽰地址栏，yes为允许； // status=no 是否显⽰状态栏内的信息（通常是⽂件已经打开），yes为允许； d. 移动窗口
1) moveBy() / moveTo()
// movaBy(x: number, y: number) moveBy( 100, 100 ) // x,y 都移动自身的100；增加量！！ movaTo( 100, 100 ) // x,y 都移动至100；坐标！！ e. 设置窗口大小
1) resizeBy() / resizeTo()
//改变对应的窗口大小 window.resizeBy(200,200) //width+200 height+200 //resizeTo window.resizeTo(200,200) //width=200 height=200 f. 打印方法
1) print()
//print打印方法 window.print() g. 聚焦与失焦方法
1) focus() / blur()
//focus 聚焦 blur 失去焦点 window.focus() window.blur() h. 查找方法
1) find() 相当于ctrl+f
//find查找 window.find() i. 滚动栏位置改变
1) scrollBy() / scrollTo()
//滚动栏位置改变 初始位置 x:0,y:0 // window.scrollBy( options ? : ScrollToOptions ) window.scrollBy(100,100) //原本的位置 x+100，y+100 window.scrollTo(500,500) //到达位置 x=500 y=500 //回到顶部
- window在调用方法时，通常可以省略window，如：alter()，open()……
- 弹窗方法中，注意各个方法的返回值类型。
- 注意 By 和 To 的区别。
二、history对象
（一）属性
a. length 历史页面个数
// 历史页面个数 (本页操作) console.log(history.length) // 1,2,3…… b. state 状态存储的对象
// state 状态值 null(默认) console.log(history.state) // null c. scrollRestoration 滚动栏恢复
// 滚动条恢复属性 auto(默认) manual(手动) console.log(history.scrollRestoration); // auto （二）方法
a. forward() 前进
<button onclick=fnForward()>前进</button> <script> function fnForward() { history.forward() } </script>> b. back() 后退
<button onclick=fnBack()>后退</button> <script> function fnBack() { history.back() } </script>> c. go() 去任意页面 0(自己)、小于零后退，大于零前进
<button onclick=fnGo()>GO</button> <script> function fnGo() { history.go(-1) } </script>> d. pushState()
<button onclick=pushState()>Push</button> <script> function pushState() { // pushState( data: any, unused: string, url?: string | URL ) state数据，第二个填''，第三个地址( 跨域问题 ) history.pushState('111','') } </script>> e. replaceState()
<button onclick=replaceState()>replace</button> <script> function replaceState() { // replaceState( data: any, unused: string, url?: string | URL ) state数据，第二个填''，第三个地址( 跨域问题 ) history.replaceState('222','') } </script>> 三、location对象
（一）属性
console.log(location); // 相关属性 console.log(location.hash); // hash #号后面的内容(#) console.log(location.search); // search ?号后面的内容(?) 不与hash同时使用 console.log(location.protocol); // 协议: http: 80 https: 443 console.log(location.host); // ip号 + 端口号 127.0.0.1:5500 console.log(location.hostname); // ip号 127.0.0.1 console.log(location.port); // 端口号 5500 console.log(location.pathname); // 路径名(后面的内容) console.log(location.href); // 跳转地址 (全称) 可以设置 console.log(location.origin); // 跨域 （二）方法
a. assign() 跳转 可以返回
function fn() { location.assign('http://www.baidu.com') } b. replace() 替换 直接替换，无法返回
function fn() { location.replace('http://www.4399.com') } c. reload() 重新加载(相当于刷新)
function fn() { location.reload(true) // true 为服务器加载 false为本地缓存加载 } 四、frames、screen、navigator
- frames与第三方框架有关
- screen为屏幕对象
- navigator为浏览器以及系统对象
（一）screen 对象
a. 属性 (记得即可)
avaliHeight // 可占用的最大高度 avaliWidth // 可占用的最大宽度 avaliLeft // 离屏幕左侧的距离 avaliTop // 离屏幕上方的距离 （二）navigator对象
a. 属性
userAgent // 用户浏览器设置信息 五、路由（拓展）
路由分为：前端路由和后端路由
前端路由：根据不同的访问路径(path),渲染不同的内容(组件)
- 页面路由
- hash路由
- H5