6.浏览器对象：BOM

1.window对象：（是浏览器窗口对文档提供的一个现实的容器，代表打开的浏览器窗口。调用方法是window.属性 或 window.方法，也可以省略window）

（1）属性

window.innerWidth; //返回窗口文档显示区的宽度 （输出：1920）
window.innerHeight; //返回窗口文档显示区的高度 （输出：936）
window.name; //设置或返回窗口名称 （输出：）
window.opener; //返回对创建此窗口的窗口引用 （输出：null）
window.closed; //返回长否已被关闭 （输出：false）
window.self; //返回对当前窗口的引用 （输出：window的所有属性和方法）
window.top; //返回最顶层的先辈窗口 （输出：window的所有属性和方法）
window.outerWidth; //返回窗口的外部宽度 （输出：1920）
window.outerHeight; //返回外部窗口的高度 （输出：1040）
window.status; //返回窗口状态栏的文本 （输出：）

（2）对话框方法

alert('警告框'); //只有确认按钮
confirm('对话框'); //有取消按钮；返回布尔值
prompt('敏捷对话框','默认值'); //有取消按钮；返回输入值，取消返回null

（3）其他方法

print(); //打印当前窗口的内容
blur(); //把键盘焦点从顶层窗口移开
createPopup(); //创建一个pop-up窗口
focus(); //把键盘焦点给予一个窗口
moveBy(); //可相对窗口的当前坐标把他移动到指定像素
moveTo(); //把窗口的左上角移动到一个指定坐标
resizeBy(); //按照指定像素调整窗口大小
resizeTo(); //把窗口大小调整到指定的宽度和高度
scrollBy(); //按照指定的像素来滚动内容
scrollTo(); //把内容滚动到指定坐标

（4）窗体控制方法

/* 1.open('url','name','feature') */
//feature：width、height、top、left、toolbar窗口是否有标准工具栏
//resizeable是否可改变大小
//location是否有地址工具栏
//directories是否有链接工具栏
//status是否有状态栏
//menubar是否有菜单栏
//scrollbar指定当前窗口大于窗口
<el-button type="success" round @click="myOpen()">打开窗口</el-button>
myOpen(){
    this.myWindow = open('http://www.baidu.com','window1','width=300px,height=300px,top=200px');
}

/* 2.close() */
<el-button type="info" round @click="myClose()">关闭窗口</el-button>
myClose(){
    this.myWindow.close();
}

（5）定时器方法

//1.setTimeout('函数',1000)、clearTimeout(t); //指定毫秒数后调用函数
//2.setInterval('函数',1000)、clearInterval(t); //按指定的周期循环调用函数
this.timer = setInterval(this.nowTime, 1000);
nowTime() {
    let d = new Date();
    let mySeconds = d.getSeconds();
    if (mySeconds == 10) {
        clearInterval(this.timer);
    }
    console.log("time:", mySeconds);
}

 

2.history对象

（1）属性

history.length; //查看浏览器的历史列表中访问网页的个数

（2）方法

 

history.back(); //加载history列表中前一个url
history.forward(); //加载history列表中下一个url
history.go(1); //加载history列表中某个具体的页面

 

 

3.location对象

（1）属性

location.href; //返回完整的url （输出：http://localhost:8080/home）
location.host; //返回主机名和当前端口号 （输出：localhost:8080）
location.hostname; //返回主机名 （输出：localhost）
location.port; //返回端口号 （输出：8080）
location.pathname; //返回url路径 （输出：/home）
location.protocol; //返回url的协议 （输出：http:）
location.hash; //返回从#开始的url （输出：）
location.search; //返回从？开始的url （输出：）

（2）location.assign()

 

location.assign('http://www.baidu.com');//加载新文档

 

（3）location.reload()

/* 1.没有参数或参数为false时：
    · 如果文档已改变，reload()会再次下载该文档；
    · 如果文档未改变，则reload()将从缓存中装载文档（这与用户点击浏览器刷新按钮效果一致）；
2.参数为true时：
    · 无论文档有没有改变，都会绕过缓存，从服务器上重新下载该文档（这与用户按住shift键点击浏览器刷新按钮效果一致）；*/
location.reload();//重新加载当前文档

（4）location.replace()

//replace()方法不会再history对象中生成一个新的记录
 //当使用该方法时，新的url会覆盖history对象中当前记录
location.replace('http://www.baidu.com');//用新的文档替换当前文档

 

4.screen对象

（1）属性

screen.availWidth; //返回显示屏的宽度（不包括windows任务栏）
screen.availHeight; //返回显示屏的高度（不包括windows任务栏）
screen.width; //返回显示屏的宽度
screen.height; //返回显示屏的高度
screen.bufferDepth; //返回调色板的比特深度

 

5.navigator对象

（1）属性

navigator.appName; //返回浏览器名称
navigator.appCodeName; //返回浏览器代码名
navigator.appVersion; //返回浏览器的平台和版本信息
navigator.appMinorVersion; //返回浏览器的次级版本
navigator.cookieEnabled; //返回指明浏览器中是否启用cookie的布尔值
navigator.userAgent; //返回由客户机发送服务器的user-agent头部的值
navigator.onLine; //返回指明系统是否处于脱机模式的布尔值