JavaScript_BOM

一、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     //回到顶部

1. window在调用方法时，通常可以省略window，如：alter()，open()……
2. 弹窗方法中，注意各个方法的返回值类型。
3. 注意 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