7-44 浏览器对象
基本概念
BOM是Browser Object Model的缩写，简称浏览器对象模型
BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性
基本的BOM体系结构图(https://blog.csdn.net/avon520/article/details/2685331)
能利用BOM做什么？
BOM提供了一些访问窗口对象的一些方法，我们可以用它来移动窗口位置，改变窗口大小，打开新窗口和关闭窗口，弹出对话框，进行导航以及获取客户的一些信息如：浏览器品牌版本，屏幕分辨率。但BOM最强大的功能是它提供了一个访问HTML页面的一入口——document对象，以使得我们可以通过这个入口来使用DOM的强大功能！！！
window对象的方法和属性
window对象是浏览器窗口对文档提供的一个现实的容器，代表打开的浏览器窗口，是每一个加载文档的父对象
window的属性和方法调用方法:window.属性，window.方法
也可以直接调用省略 window.
- 对话框
- alert() 显示带有一段消息和一个确认按钮的警告框。
window.alert()；
- confirm() 显示可提示用户输入的对话框。返回值为布尔值
var boll=confirm("大师兄！师父不见了！");
if(boll==1){
alert("赶紧救师父！");
}else{
alert("分行李回家吧");
}- prompt() 显示带有一段消息以及确认按钮和取消按钮的对话框。
第一个参数是提示,第二个参数是默认值;
返回值为输入的值，取消返回null
alert(prompt('第一个返回值','默认值'));
- 窗体控制
- open() 打开一个新的浏览器窗口或查找一个已命名的窗口。
- URL:声明了要在新窗口中显示的文档的 URL。
open('http://www.baidu.com');
- name:声明了新窗口的名称或者窗口目标。
open('http://www.baidu.com','window1');
open('http://www.51zx.net','window2');
open('http://www.csdn.com','window3');
//会同时打开三个窗口，若三条语句都是window1，则只在一个窗口打开三次，显示的是最后一个网站
open('http://www.taobao.com','_parent');
//_parent在本窗口打开。默认是新窗口打开，相当于_blank
- features:声明了新窗口要显示的标准浏览器的特征。
- 窗口的属性：
- 常用：
- width:新建窗口宽度
- heigth:新建窗口高度
- top:左上角垂直坐标
- left:左上角水平坐标
open('http://www.taobao.com','window','width=100px','height=100px','top=100','left=200');
- 其他不太常用的属性：
- toolbar：指定窗口是否有标准工具栏。当该选项的值为1或yes时，表示有标准工具栏，当该选项的值为0或no时，表示没有标准工具栏；
- resizable：指定窗口是否可改变大小，选项的值及含义与toolbar相同；
- ocation：指定窗口是否有地址工具栏，选项的值及含义与toolbar相同；
- directories：指定窗口是否有链接工具栏，选项的值及含义与toolbar相同；
- status：指定窗口是否有状态栏，选项的值及含义与toolbar相同；
- menubar：指定窗口是否有菜单，选项的值及含义与toolbar相同；
- scrollbar：指定当前窗口文档大于窗口时是否有滚动条，选项的值及含义与 toolbar相同；
- ........
- close() 关闭浏览器窗口。
- 定时器
- setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
function a(){
// alert('2秒后运行');
document.write('1秒后运行')
}
var b=setInterval(a,1000);- setTimeout() 在指定的毫秒数后调用函数或计算表达式。
function a(){
alert('2秒后运行');
}
setTimeout(a,2000)
//或写在一条语句中
setTimeout(function(){alert('run in 1 second')},1000);- clearInterval() 取消由 setInterval() 设置的 timeout。
clearInterval(b);- clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
clearTimeout(b);
- 其他方法
- print() 打印当前窗口的内容。
- blur() 把键盘焦点从顶层窗口移开。
- createPopup() 创建一个 pop-up 窗口。
- focus() 把键盘焦点给予一个窗口。
- moveBy() 可相对窗口的当前坐标把它移动指定的像素。
- moveTo() 把窗口的左上角移动到一个指定的坐标。
- resizeBy() 按照指定的像素调整窗口的大小。
- resizeTo() 把窗口的大小调整到指定的宽度和高度。
- scrollBy() 按照指定的像素值来滚动内容。
- scrollTo() 把内容滚动到指定的坐标。
Window对象属性
- 掌握部分
- innerWidth 返回窗口的文档显示区的宽度。
- innerHeight 返回窗口的文档显示区的高度。
document.write('浏览器宽度：'+window.innerWidth+'<br>')
document.write('浏览器宽度：'+window.innerHeight+'<br>')- 了解部分
- name 设置或返回窗口的名称。
- opener 返回对创建此窗口的窗口的引用。
- closed 返回窗口是否已被关闭。
- self 返回对当前窗口的引用。
- top 返回最顶层的先辈窗口。
- outerheight 返回窗口的外部高度。
- outerwidth 返回窗口的外部宽度。
- status 设置窗口状态栏的文本。
- ......
History对象的常用方法
- back() 加载 history 列表中的前一个 URL。
- forward() 加载 history 列表中的下一个 URL。
- go() 加载 history 列表中的某个具体页面。
history.go(1); //1表示forward，下一个页面；-1表示back，上一个页面Location对象
- Location 对象的属性
- href 设置或返回完整的 URL。
alert(location.href)- host 设置或返回主机名和当前 URL 的端口号。
- hash 设置或返回从井号 (#) 开始的 URL（锚）。
- hostname 设置或返回当前 URL 的主机名。
- pathname 设置或返回当前 URL 的路径部分。
- port 设置或返回当前 URL 的端口号。
- protocol 设置或返回当前 URL 的协议。
- search 设置或返回从问号 (?) 开始的 URL（查询部分）。
- Location 对象的方法
- assign() 加载新的文档。
function a(){
location.assign('http://www.baudu.com');
}
- reload() 重新加载当前文档。
function b(){
location.reload();
}
如果把该方法的参数设置为 true，那么无论文档的最后修改日期是什么，它都会绕过缓存，从服务器上重新下载该文档。这与用户在单击浏览器的刷新按钮时按住 Shift 健的效果是完全一样。
- replace() 用新的文档替换当前文档。
function c(){
location.replace('http://www.baudu.com');
}
//replace() 方法不会在 History 对象中生成一个新的记录。当使用该方法时，新的 URL 将覆盖 History 对象中的当前记录。
Screen对象
- availHeight 返回显示屏幕的高度 (除 Windows 任务栏之外)。
- availWidth 返回显示屏幕的宽度 (除 Windows 任务栏之外)。
- height 返回显示屏幕的高度。
- width 返回显示器屏幕的宽度。
- bufferDepth 设置或返回调色板的比特深度。
- ......