BOM
BOM
1.什么是BOM--------Brower Object Model 浏览器对象模型
2.Why study? 在JS的语法中没有输入和输出等任何操作，要想使得JS（人）能够操作浏览器（房子）的 行为就需要一个位于JS内部但是可以调用浏览器行为的介质（房子名）.这个介质就是既位于 JS中又位于浏览器中的Global对象，Gloal对象在浏览器中的实现就是window对象（房子名）
3.学习BOM就是学习window对象
window的子对象属性：
document 文档对象 DOM
frames 框架集对象
history 浏览器历史对象
location 浏览器位置信息对象
navigator 浏览器信息对象
screen 浏览器屏幕对象
window中的关系属性：
parent 表示当前页面的上一级页面的window对象
self 表示当前页面的window对象
this 表示当前页面的window对象
top 表示当前页面的顶级页面的window对象
opener 表示打开当前页面的页面的window对象
frames 框架集对象
//查找left.html的页面的window对象
//alert(window.frames[1].location.href);
//alert(window.frames['topFrame'].location.href);
//查找left.html的页面的window对象
//alert(frames[1].location.href);
//alert(frames['topFrame'].location.href);
//查找left.html的页面的window对象
//alert(this.frames[1].location.href);
//alert(this.frames['topFrame'].location.href);
//查找left.html的页面的window对象
//alert(self.frames[1].location.href);
//alert(self.frames['topFrame'].location.href);
//在顶级页面中还可以使用parent和top来代表当前页面的window
//alert(parent.frames[1].location.href);
//alert(parent.frames['topFrame'].location.href);
//alert(top.frames[1].location.href);
//alert(top.frames['topFrame'].location.href);
注意：1.以上所有的操作必须在框架集页面的window.onload事件执行之内.！
2.不要在chrome浏览器中试验
screen 屏幕对象 availWidth: 获取当前屏幕的水平分辨率//screen.availWidth
availHeight: 获取当前屏幕的垂直分辨率//screen.availHeight
window对象的其他属性和方法
窗口位置属性
screenLeft 表示当前浏览器相对于屏幕的水平坐标//window.screenLeft(非火狐浏览器)
screenTop 表示当前浏览器相对于屏幕的垂直坐标//window.screenTop(非火狐浏览器)
screenX 表示当前浏览器相对于屏幕的水平坐标//window.screenX(火狐浏览器)
screenY表示当前浏览器相对于屏幕的垂直坐标//window.screenY(火狐浏览器)
窗口大小属性、；
innerWidth： 表示当前窗口的宽度(视窗)//window.innerWidth(非IE浏览器)
innerHeight： 表示当前窗口的高度(视窗)//window.innerHeight (非IE浏览器)
//在IE的标准模式下(有 <!doctype html>)
document.documentElement.clientWidth 表示当前视窗的宽度
document.documentElement.clientHeight表示当前视窗的高度
//alert(document.documentElement.clientWidth);//1362
//alert(document.documentElement.clientHeight);//584
//在IE的怪异模式下(无 <!doctype html> 注意 必须有body标签)
document.body.clientWidth 表示当前视窗的宽度
document.body.clientHeight表示当前视窗的宽度
//alert(document.body.clientWidth);//1345
//alert(document.body.clientHeight);//584
窗口位置调整方法 moveTo(x,y) 将当前窗口移动到指定的位置//moveTo(100,100); 只对IE管用
moveBy(长度,长度) 将浏览器窗口在当前的位置上 移动指定的长度 只对IE管用
长度正数 表示向右或者向下移动，负数表示向左或者向上移动//moveBy(-30,-30);
窗口大小调整方法
resizeTo(宽度,高度) 将当前页面调整到指定的大小//resizeTo(30,200);
resizeBy(长度,长度) 将当前页面在当前大小的基础上进行调整
长度：正数表示增大，负数表示减小//resizeBy(100,300);
屏幕焦点方法
blur() 失去焦点的方法
focus() 获取焦点的方法
<button onclick="jd()">失去焦点</button>
function jd(){
//失去焦点
blur();
//定时3秒钟后自动获取焦点
setTimeout(function(){
focus();
},3000);
}
定时执行和循环执行方法
setTimeout() 定时执行方法
格式：变量=setTimeout(回调函数,时间)
回调函数可以使用三种方式
1.匿名函数 var test=setTimeout(function(){alert(11111111111111);},1000);
2.声明函数名 var test1=setTimeout(tan,5000); function tan(){alert(22222222222222);}
3.声明函数调用的字符串方式
var test2=setTimeout(‘tann()’,5000); function tann(){alert(22222222222222);}
clearTimeout() 清除定时执行的方法
格式：clearTimeout(定时执行的变量)
<button onclick="stopds()">停止定时</button>
// 声明停止定时的方法
function stopds(){
clearTimeout(test1);
}
setInterval() 循环执行方法 只对google管用
格式：变量=setInterval(回调函数,时间)
回调函数可以使用三种方式
1匿名函数var test=setInterval(function(){ document.write('123'); },1000);//推荐
2声明函数名
3声明函数调用的字符串方式
clearInterval(); 清除循环执行的方法
格式: clearInterval(循环执行的变量)
<button onclick="stopxh()">停止循环</button>
<div id="content"></div>
var num=1;
var xhtest=setInterval(function(){
content.innerHTML+=num+'-';
num++;
},1);
function stopxh(){
clearInterval(xhtest);
}
新窗体的操作：
open() 打开一个新的页面
格式： open(URL地址,打开方式,页面设定,是否替换当前页面)
var newpage=open('2.html','_blank','width=400,height=400,resizable=no,left=200,top=200');
参数名称 | 类型 | 说明 |
height | Number | 设置窗体的高度，不能小于100 |
left | Number | 说明创建窗体的左坐标，不能为负值 |
location | Boolean | 窗体是否显示地址栏，默认值为no |
resizable | Boolean | 窗体是否允许通过拖动边线调整大小，默认值为no |
scrollbars | Boolean | 窗体中内部超出窗口可视范围时是否允许拖动，默认值为no |
toolbar | Boolean | 窗体是否显示工具栏，默认值为no |
top | Number | 说明创建窗体的上坐标，不能为负值 |
status | Boolean | 窗体是否显示状态栏，默认值为no |
width | Number | 创建窗体的宽度，不能小于100 |
close() 关闭页面的方法 注意：没有关系的2个页面是不能关闭对方页面的
closed 用于检测浏览器页面状态的属性
//设置10秒后关闭子页面
setTimeout(function(){
//检测子页面是否被关闭
if(newpage.closed){
alert('newpage is colosed');
}else{
//关闭打开的子页面
newpage.close();
}
},10000);
-----------------------------------------------------------------------------------------
<!doctype html>
<script>
//感知打开当前页面的页面 IE关闭所有页面后测试
//alert(window.opener.location.href);
//打开此页面时，关闭打开此页面的页面
window.opener.close();
</script>
1.系统弹窗方法()：
alert() 系统警告弹窗 格式：alert(字符串) 返回值:无
confirm() 系统确认弹窗 格式：confirm(‘提示的字符串’) 返回值：有布尔值
prompt() 系统输入弹窗 格式：prompt(提示使用的字符串,’默认值’); 返回值: 输入的内容
2.History子对象 浏览器历史对象
length 用于记录当前对象中记录的历史访问页面的个数
go() 向任意页面移动 格式：history.go(整数--正[向前]--负[向后])
back() 向上一个页面移 格式：history.back()
forward() 向下一个页面移动 格式：history.forward()
3.Location子对象 浏览器位置信息对象
href 表示当前浏览器的地址 可以获取地址也可以跳转页面
host 表示当前地址的域名部分 本地协议访问无值
hostname 表示当前地址的域名部分 不包含端口
port 端口
protocol 表示当前页面访问的协议
pathname url的路径部分
assign() 页面跳转 效果和设置href值一致 格式：location.assign(URL地址)
replace() 页面替换操作 效果类似于assign 格式：location.replace(URL地址)
该方法和assign的区别在于 assign会产生一条历史记录而该方法不会
reload() 重新加载页面 格式:location.reload([布尔值])
如果不使用参数true 表示刷新操作相当于F5
如果使用参数true 表示强制刷新操作 相当于ctrl+F5
4.Navigator 浏览器信息对象
geolocation 浏览器定位对象 HTML5新增
onLine 检测当前浏览器是否能够上网
product 产品内核
platform 系统平台
