JS-BOM

一、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。

二、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.οnclick=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里。每秒钟执行一次。*/

转载于:https://www.cnblogs.com/zhengfuheidao/p/7132767.html