JS-BOM

1、BOM

 BOM是browser object model的缩写，简称浏览器对象模型。

BOM提供了独立于浏览器显示内容而与浏览器窗口进行交互的对象。

        我的理解是，咱们知道浏览器显示的Document,javascrip 要想操做网页，须要DOM来进行访问，可是仅仅只是网页内容。浏览器除了有显示的内容，还有一个重要的部分就是一个载体，它承载咱们看到的内容。比如是一个框架，而操做这个载体的对象咱们把它叫作BOM。因此这样的结构，使得BOM，DOM各司其职，BOM负责跟浏览器框架打交道，DOM负责浏览器内容Document打交道。

       BOM主要用于管理浏览器窗口之间的通信，由一系列相关的对象构成，而且每一个对象都提供了不少方法与属性。经过BOM咱们能够学到与浏览器窗口交互的一些对象，能够移动，调整浏览器大小的window对象，能够用于导航的location对象与history对象，能够获取浏览器，操做系统与用户屏幕信息的navigator与screen对象，能够使用document做为访问HTML文档的入口，管理框架的frames对象等。所以它的核心对象是window。

2、BOM结构图

/*
1.window对象是最顶层的对象
2.window对象有六大属性，这六个属性自己也是对象
3.window对象下的document属性，也是对象，而且document对象下有五个属性。
4.document对象下的五个属性也是对象。总结，都是对象。

调用
window的属性和方法的调用：window.属性，window.方法()
也能够直接属性，方法()
若是是某个浏览器独有的属性或者方法，那么在其余浏览器可能会不识别，看成变量或者看成普通函数

closed = '123'; //若是有浏览器不认识，就看成变量了
强制性的操做
window.closed; //强制性

window.alert('Lee'); //这个全部浏览器都认识，能够不加window.

肯定和取消
confirm('请'); //这里有肯定和取消按钮，自己方法能够返回一个布尔值。
//若是点击肯定，返回true，若是点击了取消，返回false
if(confirm('请选择！')){
alert('您按了肯定按钮！');
}else{
alert('您按了取消按钮！');
}

输入提示框
prompt('请输入一个数值',0); //第一个参数是说明，第二个参数是默认值，返回输入的值
var box = prompt('请输入一个数值',0);
if(box != null){
alert(box); //返回值能够获得
}

调出打印及查找对话框
//print(); //打印
//find(); //查找

defaultStatus="Lee"; //浏览器底部状态栏初始默认值
status = "Lee"; //浏览器底部状态栏设置值。

新建窗口
open()参数
1.第一个参数，是你将要导航到的URL
2.第二个参数是窗口名称或目标,命名能够给新窗口设置一个名称，凡是以这个名称打开的窗口，都在这个窗口里加载URL
open('http://www.163.com','baidu');
目标：_blank新建一个窗口,_parent表示在本窗口内加载
open('http://www.163.com','_parent');
3.特定的字符串，表示各类窗口配置的功能
open('http://www.163.com','baidu','width=400,height=400,top=100,left=100,location=yes,toolbar=yes');

var box = open('http://www.163.com','baidu','width=400,height=400,top=100,left=100');
//alert('Lee'); //这里的alert实际上是window.alert，表示的是父窗口

//open自己会返回子窗口的window对象，表示子窗口弹出
box.alert('Lee');

open('opener.html','baidu','width=400,height=400,top=100,left=100');
document.onclick=functon(){
window.opener.document.write('子窗口让我输出一行字！');
};
//点击子窗口激活父窗口

肯定窗口的位置
alert(screenLeft);
alert(screenTop);
//这两个属性火狐不认识，就会看成是没有声明初始化的变量，会报错，必须强制在这个属性前面加上window
alert(window.screenLeft);
alert(window.screenTop);

alert(typeof window.screenLeft); //火狐undefined,其余number，数值。

alert(window.screenX);
alert(window.screenY);

跨浏览器方法
var leftX = typeof window.screenLeft == 'number'?window.screenLeft:window.screenX;
var topY = typeof window.screenTop == 'number'?window.screenTop:window.screenY;
alert(leftX);
alert(topY);

alert(window.innerWidth);
alert(window.innerHeight);
//窗口页面的大小

alert(window.outerWidth);
alert(window.outerHeight);
//窗口+边框大小

alert(document.documentElement.clientWidth);
alert(document.documentElement.clientHeight);
//IE支持

//跨浏览器获取视口（可视范围的页面窗口）
//若是是Firefox浏览器，直接使用innerWidth和innerHeight
var width = window.innerWidth; //这里要加window，由于IE会无效
var height = window.innerHeight;

//不支持的就是用document对象的方法
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;
}
}
alert(width);
alert(height);

调整浏览器的位置
//moveTo(100,100);
//moveBy(10,10); //IE原版支持，谷歌不支持

调整浏览器的大小
//resizeTo(300,300);
//resizeBy(-10,-10);

超时调用
//setTimeout第一个参数能够是字符串，而里面能够是代码块，由于它有解析功能，因此引号里面仍是能够执行的。
//这种写法不推荐，容易出错，不容易扩展
//setTimeout("alert('Lee')",2000); //2秒后执行第一个参数的代码块

function box(){
alert('Lee');
}
setTimeout(box,2000); //第一个参数，直接存放一个函数

setTimeout(function box(){ //推荐，扩展和封装性好。
alert('Lee');
},2000);

var box = setTimeout(function(){ //返回值是超时调用的ID的数值
alert('Lee');
},2000);
alert(box); //打印出box是数值2
clearTimeout(box); //取消当前超时调用计划

间歇调用
var box = setInterval(function(){ //间歇调用，能够重复不断的执行
alert('Lee');
},1000)
clearInterval(box); //取消当前间歇调用计划

定时器实例
var num = 0; //从零秒开始
var max = 5; //最大秒数五秒
var id = null;
function box(){ //this自己不能表明ID
num++;
document.getElementById('a').innerHTML += num;
if(num == max){ //若是等于5
clearInterval(id); //中止执行
alert('5秒到了！'); //并输出
}
}
id = setInterval(box,1000); //将执行函数存放在id里。每秒钟执行一次。

//使用超时调用，模拟定时器
var num = 0;
var max = 5;
function box(){
num++;
document.getElementById('a').innerHTML += num;
if(num == max){ //若是等于5
alert('5秒到了！'); //并输出
}else{
setTimeout(box,1000);
}
}
setTimeout(box,1000);

location对象
//alert(window.location);
alert(window.document.location);

location.hash = '#66'; //设置#后的字符串，并跳转
alert(location.hash); //获取#后的字符串

location.port = 8888; //设置端口号，并跳转
alert(location.port); //获取当前端口号

location.search = '?id=5'; //死循环
alert(location.search); //若是设置search会不停的跳转

location.href = 'http://www.baidu.com'; //跳转到指定域名
location.assign('http://www.baidu.com');
location.replace('http://www.baidu.com'); //不产生任何历史记录的跳转

history对象
alert(history.length); //历史记录的总量

function back(){
history.back(); //前往浏览器历史条目前一个URL，相似后退
}
function forward(){
history.forward(); //前往浏览器历史条目下一个URL，相似前进
}
function go(num){
history.go(num); //浏览器在history对象中向前或向后
}
*/

/*function getArgs(){
var qs = location.search.length > 0 ? location.search.substring(1):'';
var items = qs.split('&');
var item = null,name=null,value=null;

for(var i=0; i<items.length; i++){
item = items[i].split('=');
name = item[0];
value = item[1];
alert(name);
alert(value);
//id=5&search=ok
}
return items;
}
alert(getArgs());*/

/*function getArgs(){
var args = [];
var qs = location.search.length > 0 ? location.search.substring(1):'';
var items = qs.split('&');
var item = null,name=null,value=null;

for(var i=0; i<items.length; i++){
item = items[i].split('=');
name = item[0];
value = item[1];
args[name] = value;
}
return args;
}
var args = getArgs();
alert(args['id']);
alert(args['search']);*/

 

 

 

/*定时器实例var num = 0; //从零秒开始var max = 5; //最大秒数五秒var id = null;function box(){ //this自己不能表明ID num++; document.getElementById('a').innerHTML += num; if(num == max){ //若是等于5 clearInterval(id); //中止执行 alert('5秒到了！'); //并输出 }}id = setInterval(box,1000); //将执行函数存放在id里。每秒钟执行一次。*/