JS基础知识（八）：BOM

一、BOM的概念

BOM：浏览器对象模型（browser object model）
浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。
Window是BOM中的核心对象。

document：对文档对象的只读引用
frames：返回窗口中所有命名的框架。该集合是 Window 对象的数组，每个 Window 对象在窗口中含有一个框架。
navigator：返回浏览器的相关信息
screen：用户屏幕的相关信息screen.availWidth - 可用的屏幕宽度

二、系统对话框

//浏览器可以通过alert()、confirm()和 prompt()方法
//调用系统对话框向用户显示信息。
//弹出警告
alert("Lee");            //直接弹出警告框

//提示框   确定和取消
confirm("请确定或者取消");
if(confirm(("请确定或者取消")){
	alert(“您按了确定！”);      //按确定返回true
}else{
	alert(“您按了取消！”)       //按取消返回false
}

//输入带输入提示框
var num = prompt("请输入一个数字", 0); //两个参数,一个提示,一个输入框中的值（不写输入框默认为空）
alert(num);     //得到输入的值

三、window.open方法

window.open() 方法可以导航到一个特定的URL，也可以打开一个新的浏览器窗口，一般可以接受三个参数:

1. 要加载的URL
2. 窗口的名称或者窗口的目标（可选参数）
3. 一个特性的字符串（可选参数）

window.open(“http://www.baidu.com”); //新建页面并打开百度
window.open(“http://www.baidu.com”, “baidu”); //新建页面并命名窗口并打开百度
window.open(“http://www.baidu.com”, “_parent”); //在本页窗口打开,_blank是新建
【注】不命名会每次打开新窗口，命名的第一次打开新窗口,之后在这个窗口中加载

第三个参数字符串中的参数说明：

open(‘http://www.baidu.com’,‘baidu’,‘width=400,height=400,top=200,left=200’);
//open本身返回子窗口的window对象
var box = open();
box.alert(’’); //可以指定弹出的窗口执行 alert();

四、location对象

location是BOM对象之一，它提供了与当前窗口中加载的文档有关的信息,还提供了一些导航功能。事实上，location对象是window对象的属性，也是document对象的属性;所以window.location和document.location等效。

4.1 location对象属性

location.hash = "#1";     //设置#后的字符串，并跳转
location.port = 8888;      //设置端口号，并跳转
location.hostname = 'Lee' ; //设置主机名，并跳转
location.pathname = 'Lee';  //设置当前路径，并跳转
location.protocal = 'ftp:'; //设置协议，没有跳转
location.search = "?id=5";  //设置?后面的字符串,并跳转
location.href = “http://www.baidu.com”;  //设置跳转的URL，并跳转

4.2 location对象方法

location.assign('http://www.baidu.com'); //跳转到指定的URL
location.reload(); //最有效的重新加载,有可能缓存加载
location.reload(true); //强制加载,从服务器源头重新加载
location.replace("http://www.baidu.com"); //可以避免产生跳转前的历史记录

//window.location.href在当前页面跳转，不会打开新窗口，可以回退
//hybrid.call()会弹出一个新窗口，不具有浏览器的回退功能，手机上的回退键其实是相当于浏览器的关闭按钮

五、history对象

history对象是window对象的属性，它保存用户上网的记录,从窗口被打开的那一刻算起。

//属性
history.length; //history对象中的记录数
//方法
history.back();   //前往浏览器历史条目前一个URL,类似后退
history.forward();        //前往浏览器历史条目下一个URL,类似前进
history.go(num);   //浏览器在history对象中向前或向后