BOM操作
BOM定义了JavaScript可以进行操作的浏览器的各个功能部件的接口。
一、window对象
Window对象的常用方法:
>>>在Window对象中的所有属性和方法,均可以省略WIndow关键字。
window.alert(); -> alert();
1、alert():弹出一个警告提示框;
2、prompt():弹窗接受用户的输入;
3、confirm():弹出带有“确定”、“取消”按钮的对话框,点击按钮返回true/false
4、close():关闭当前浏览器窗口。在个别浏览器中,只能关闭当前脚本新打开的页面(使用超链接、window.open()等方式打开);
5、open();打开一个新窗口
参数一:新窗口的地址
参数二:新窗口的名字,并没有什么用
参数三:新窗口的各种属性值设置,"属性值1=值1,属性值3=值3,属性值3=值3"
6、setTimeout:设置延时执行,只会执行一次;
setInterval:设置定时器,每个n毫秒执行一次。
接受两个参数:需要执行的function、毫秒数;
7、clearTimeout:清除延时器
clearInterval:清楚定时器
使用方法:设置延时器或定时器时,可以使用变量接受定时器ID;
var id = setInterval;
调用clearInterval时,将id传入,即可清除对应的定时器;
clearInterval(id);
<script type="text/javascript"> /* * 使用定时器,打印1-10,并求和 */ var setId = 0; var i = 0 ; var sum = 0; function setInterval1 () { setId = setInterval(function(){ i++; sum +=i; console.log(i); if(i==10){ !function(){ clearInterval(setId); console.log(sum); }(); } },1000); } </script> <body> <button onclick="setInterval1()">setInterval设置定时器</button> </body>
二、screen对象
console.log(screen.width);//屏幕宽度
console.log(screen.height);//屏幕高度
console.log(screen.availWidth);//可用宽度
console.log(screen.availHeight);//可用高度 = 屏幕高度 - 底部工具栏所占高度
三、 Location对象
取到浏览器的URL地址信息;
完整的URL路径:
协议名://主机名(IP地址):端口号/文件所在路径?传递参数(name1=value1&name2=value2)#锚点
例如:
http://127.0.0.1:8080/wenjianjia/index.html?name=jredu#top
console.log(location);
console.log(location.href);//返回当前完整路径
console.log(location.protocol);//返回协议名
console.log(location.host);//返回主机名和端口号
console.log(location.hostname);//返回主机名
console.log(location.port);//返回端口号
console.log(location.pathname);//返回文件路径
console.log(location.search);//返回?开头的参数列表
console.log(location.hash);//返回#开头的锚点
使用js跳转页面
window.location = "http://www.baidu.com";
其他使用location提供的方法跳转页面的方式
function assign(){
//加载新的文档。加载以后,可以回退。
location.assign("http://www.baidu.com");
}
function replace(){
//使用新文档替换当前文档。替换以后,不能回退。
location.replace("http://www.baidu.com");
}
function reload(){
/*
* 重新加载当前文档。刷新页面
* reload():在本地刷新当前页面,相当于F5
* reload(ture):强制刷新,重服务器端重新加载页面,相当于Ctrl+F5
*
*/
location.reload();
}
四、history对象———浏览历史
console.log(history);
console.log(history.length);//浏览历史列表的个数
function back () {
history.back();//后退按钮
}
function forward () {
history.forward();//前进按钮
}
function go () {
//跳转到浏览历史的任意一个页面:
// 0表示当前页面,-1表示后一页(back),1表示前一页(forward)
history.go();
}
五、 navigator
包含浏览器的各种系统信息。
console.log(navigator);
监测浏览器安装的各种插件。
console.log(navigator.plugins);
location.assign("http://www.baidu.com");
location.replace("http://www.baidu.com");