BOM
BOM也叫浏览器对象模型,它提供了很多对象,用于访问浏览器的功能。BOM缺少规范,每个浏览器提供商又按照自己想法去扩展它,那么浏览器共有对象就成了事实的标准。所以,BOM本身是没有标准的或者还没有哪个组织去标准它。
window对象
BOM的核心对象是window,它表示浏览器的一个实例。window对象处于JavaScript结构的最顶层,对于每个打开的窗口,系统都会自动为其定义 window 对象。
新建窗口
open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。
//window.open(URL,name,features,replace)//repalce为true将替换历史中的当前条目,否则新建条目
open('http://www.baidu.com');//新建页面并打开百度
open('http://www.baidu.com','baidu');//新建页面并命名窗口并打开百度
open('http://www.baidu.com','_parent');//在本页窗口打开百度,_blank是新建
<script type="text/javascript">
//示例1
function open_win()
{
window.open("child.html","new_win","width=400,height=400",true);
}
open_win()
//示例2
var myWindow=window.open('','MyName','width=200,height=100')
myWindow.document.write("This is 'myWindow'")
console.log(myWindow.closed);//false
myWindow.focus();
myWindow.close();
console.log(myWindow.closed);//true
myWindow.opener.document.write("This is the parent window")
console.log(window.closed);//false
</script>
注意:只有表示顶层窗口的 Window 对象的 operner 属性才有效,表示框架的 Window 对象的 operner 属性无效
浏览器窗口位置和尺寸
IE、Safari、Opera和Chrome都提供了screenLeft和screenTop属性,分别用于表示窗口相对于屏幕左边和上边的位置。Firefox则在screenX和screenY属性中提供相同的窗口位置信息,Safari和Chrome也同时支持这两个属性。
<script type="text/javascript">
console.log(window.screenLeft);
console.log(window.screenX);
console.log(window.screenTop);
console.log(window.screenY);
</script>
注意:screenX,screenY是以红色区域的左上角为基准,其相对于屏幕左上角的距离
innerWidth和innerHeight,返回浏览器窗口本身的尺寸;outerWidth和outerHeight,返回浏览器窗口本身及边框的尺寸。
<!DOCTYPE html>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
console.log(window.innerWidth);
console.log(window.innerHeight);
console.log(window.outerWidth);
console.log(window.outerHeight);
</script>
</script>
</head>
<body>
<div style="height:1000px"></div>
</body>
</html>
红色区域代表了innerWidth和innerHeight,蓝色区域代表了outerWidth和outerHeight
IE没有提供当前浏览器窗口尺寸的属性;不过,在后面的DOM课程中有提供相关的方法。
页面窗口尺寸
在IE以及Firefox、Safari、Opera和Chrome中,document.documentElement.clientWidth和document.documentElement.clientHeight中保存了页面窗口的信息。在IE6中,这些属性必须在标准模式下才有效;如果是怪异模式,就必须通过document.body.clientWidth和document.body.clientHeight取得相同的信息。
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
//如果是Firefox浏览器,直接使用innerWidth和innerHeight
//var width = window.innerWidth; //这里要加window,因为IE会无效
//var height = window.innerHeight;
if (typeof width != 'number') { //如果是IE,就使用document
if (document.compatMode == 'CSS1Compat') {
width = document.documentElement.clientWidth;
height = document.documentElement.clientHeight;
} else {
width = document.body.clientWidth; //非标准模式使用body
height = document.body.clientHeight;
}
}
console.log(width);
console.log(height);
</script>
</head>
<body>
<div style="height:1000px"></div>
</body>
</html>
红色区域代表了document.documentElement.clientWidth和document.documentElement.clientHeight,可以看到,document.documentElement.clientWidth和document.documentElement.clientHeight获取的值和innerWidth和innerHeight是一样的
定时器
<script type="text/javascript">
var timeId = setTimeout(function(name,age){
console.log(name+":"+age);//lisong:26
},100,"lisong",26);
//clearTimeout(timeId);
var intervalId = setInterval(function(name,age){
console.log(name+":"+age);//lisong1:26
},1000,"lisong1",26);
//clearTimeout(intervalId);
</script>
location对象
提供了与当前窗口中加载的文档有关的信息,还提供了一些导航功能。事实上,location对象是window对象的属性,也是document对象的属性;所以window.location和document.location等效。
location属性
属性 | 描述 |
---|---|
hash | 设置或返回从井号 (#) 开始的 URL(锚)。 |
host | 设置或返回主机名和当前 URL 的端口号。 |
hostname | 设置或返回当前 URL 的主机名。 |
href | 设置或返回完整的 URL。 |
pathname | 设置或返回当前 URL 的路径部分。 |
port | 设置或返回当前 URL 的端口号。 |
protocol | 设置或返回当前 URL 的协议。 |
search | 设置或返回从问号 (?) 开始的 URL(查询部分)。 |
location方法
assign() | 加载新的文档。 |
<script type="text/javascript">
location.hash = '#1'; //设置#后的字符串,并跳转
console.log(location.hash); //获取#后的字符串
location.port = 8888; //设置端口号,并跳转
console.log(location.port); //获取当前端口号,
location.hostname = 'Lee'; //设置主机名,并跳转
console.log(location.hostname); //获取当前主机名,
location.pathname = 'Lee'; //设置当前路径,并跳转
console.log(location.pathname); //获取当前路径,
location.protocal = 'ftp:'; //设置协议,没有跳转
console.log(location.protocol); //获取当前协议
location.search = '?id=5'; //设置?后的字符串,并跳转
console.log(location.search); //获取?后的字符串
location.href = 'http://www.baidu.com'; //设置跳转的URL,并跳转
console.log(location.href); //获取当前的URL*/
</script>
注意:上面的方法会直接改变地址栏在Web开发中,我们经常需要获取诸如?id=5&search=ok这种类型的URL的键值对,可以先获取search,再获取键值对
页面加载:
<script type="text/javascript">
location.reload();//最有效的重新加载,有可能从缓存加载
location.reload(true);//强制加载,从服务器源头重新加载
location.replace('http://www.baidu.com');//可以避免产生跳转前的历史记录
location.assign('http://www.baidu.com');//跳转到新页面,会产生新的历史
location.href = 'http://www.baidu.com'//和assign一样
</script>
history对象
history属性
length | 返回浏览器历史列表中的 URL 数量。 |
history方法
back() | 加载 history 列表中的前一个 URL。 |
forward() | 加载 history 列表中的下一个 URL。 |
go() | 加载 history 列表中的某个具体页面。 |