BOM

BOW(Browser Object Model)

浏览器 对象 模型

（一）.window

每打开一个浏览器，就会产生一个window对象（GO）

所有的BOM的顶层对象就是window

window可以使用的变量

1.var声明

2.没有关键字的变量赋值

2.window.xxx 声明的变量

window可以使用的方法

1.字面量声明的函数

2.window.xxx = function{}声明的方法

delete只对window.xxx声明的属性名有效

 

window的属性与方法

window属性

不支持IE8以下

console.log(`浏览器距离屏幕左侧尺寸：${window.screenX}`);

console.log(`浏览器距离屏幕顶部尺寸：${window.screenY}`);

不支持火狐(FireFox)

console.log(`浏览器距离屏幕左侧尺寸：${window.screenLeft}`);

console.log(`浏览器距离屏幕顶部尺寸：${window.screenTop}`);

 

浏览器尺寸

console.log(`浏览器宽度outer:${window.outerWidth}`);

console.log(`浏览器高度outer:${window.outerHeight}`);

视口尺寸（不包括检查器，地址栏，搜索框，滚动条）

console.log(`浏览器宽度inner:${window.innerWidth}`);

console.log(`浏览器高度inner:${window.innerHeight}`);

 

获取滚动条尺寸

console.log(`浏览器水平滚动条移动尺寸:${window.pageXOffset}`);

console.log(`浏览器垂直滚动条移动尺寸:${window.pageYOffset}`);

 

console.log(`浏览器水平滚动条移动尺寸:${window.scrollX}`);

console.log(`浏览器垂直滚动条移动尺寸:${window.scrollY}`);

 

window方法

提示框，警示框

window.alert();

输入框

window.promat();

确认框

window.confirm();

例子：判断用户输入的手机号是否规范

let input = window.prompt(`请输入您的手机号`)

let re =/`^[1][3-9][0-9]{9} $`/g;

re.test(input) ? window.alert(`输入正确`):window.alert(`输入错误`);

 

打开

window.open();

参数1.新页面地址

参数2.打开方式（_blank,_self）

参数3.页面尺寸

参数4.Boolean 是否替换当前的历史记录

window.open(`./jjj.html`,`_blank`,`width=500px,height=500px`);

 

时间函数

书写格式：setInterval（参数1，参数2）

参数1:被调用的函数（具体的函数体或函数名）

注：函数名（）必须是字符串

参数2:时间（多长时间调用一次参数1）单位：毫秒

例子1：

let i =0;

setInterval(

function(){

console.log(i);

i++;

},1000

);

例子2：

let i =0;

function xiao (){

console.log(i++);

}

setInterval(xiao,1000)

 

停止时间函数

书写格式：clearInterval(时间函数)

例子

let i =0;

function xiao (){

console.log(i++);

if(i>10){

clearInterval(j);

}

}

let j=setInterval(xiao,1000);

BOM分支

1.screen

2.navigator

3.location

4.history

5.document【DOM】

 

【screen】获取显示器尺寸

onsole.log(`显示器的宽度${screen.availWidth}`);

console.log(`显示器的高度${screen.availHeight}`);

 

【navigator】获取浏览器信息

console.log(`浏览器名称：${navigator.appName}`);

console.log(`浏览器版本：${navigator.appVersion}`);

console.log(`浏览器语言：${navigator.language}`);

 

【location】地址栏

onsole.log(location.href);//获取地址栏所有信息

console.log(location.port);//获取端口号

console.log(location.search);//获取？后的内容

location.replace(`./jjj.html`)//替换当前页面,replace没有返回值，共用一个窗口（推荐使用）

location.assgin(`./jjj.html`)//assign有返回值，不共用一个窗口