BOM操作

BOM

browser object model，简称BOM， 是浏览器对象模型
1.bom提供了与浏览器窗口交互的对象
2.由于bom主要用于管理窗口与窗口之间的通信，因此他的主要研究对象是window
3.ECMAScript没有规范bom的标准，因此所有的特性都是浏览器自己的特性，bom对象的方法浏览器都支持，只是略有不同
bom的子对象
1.document 文档对象
2.localtion 网址对象包含了网页的信息
3.navigator 浏览器的信息
4.history 浏览器的历史记录
5.frame 框架对现象
6.screen 浏览器的屏幕对象
* */

console.log(self);

window 对象关系属性

 1.self 指向的是window对象，可以理解为window
 2.window 指向的是window对象
 3.top 如果当前窗口为框架的子页面，top为指向该页面的父窗口的window对象
 4.oarebt 如果当前为farmer、指向包含该frame的父窗口
 5.opener 如果当前窗口为js动态打开的，执行打开该窗口的父窗口

window 对象的常用方法

 1.window.open(url,name,specs,replace);
 	返回值是新创建的窗口
 	特点：
 		1.谷歌和火狐直接调用该方法会被拦截
 		2.IE不会被拦截但是会给一个提示让用户决定是否继续执行
 		3.如果结合事件使用不会被拦截
 	参数1 : 要打开的页面链接
 	参数2 : 可以是新建窗口的名字，也可以是_blank,可选值为
 				_blank:url被加载到一个新窗口 (默认)
 				_parent:url被加载到父窗口
 				_self:url替换当前页面
 				_top:url替换任何加载的框架
 				name:设置新窗口的name名
 	参数3 : 新窗口的特性设置，只有在打开新窗口的时候才会看到效果
 		width：设置新窗口的宽度
 		height：设置新窗口的高度
 		left：设置新窗口距离屏幕可用范围左上角左边的左边的距离
 		top：设置新窗口距离屏幕可用范围左上角左边的上边的距离
 		scrollbar：0，1，yes，no 是否显示滚动条(不同浏览器显示各异)
 		resizeable：是否允许调整浏览器窗口的大小(标准浏览器不支持，IE支持)
 	参数4 : 用来调整历史记录，值是true，false 浏览器不支持，因为浏览不允许调整历史记录
 			true url会替换掉浏览历史当前的条目
 			false url会在浏览历史中创建新的条目

窗体控制

moveBy(x,y) 从当前位置，水平移动窗体x个像素，垂直移动窗体y个像素，如果x为负数则向左移动，如果y为负数则向上移动
moveTo(x,y) 移动窗体的左上角到相对于屏幕的左上角的(x,y)点上,当参数为负数的时候会把窗体移动到可视区域的的左上角
特点：
1.所有浏览器都支持，谷歌和火狐只支持动态创建出来的窗体的移动，不能对当前窗口进行移动
2.IE浏览器既支持动态创建出来的窗体的移动，又能对当前窗口进行移动
3.无论怎样移动窗体，窗体必须在当前屏幕可是范围内移动
scrollBy(x,y) 指定当前窗口页面滚动基于原来的位置，横向滚动x像素，垂直滚动y像素
scrollTo(x,y) 指定当前窗口页面横向滚动到x像素，垂直滚动到y像素
特点：
1.所有浏览器都支持
2.不仅支持新建窗口的滚动，还支持当前窗口的滚动

resizeBy(width，height) 相对于窗体当前的大小，宽度增加了，高度增加了，如果为负值，则窗体缩小，反之变大
resizeTo(width，height) 把窗体宽度调整为width像素，把高度调整为height像素
特点：
1.所有浏览器都支持
2.谷歌火狐只能调整新建出来的窗体大小，不能调整自身
3.IE既可以调整新建出来的窗体大小，又能调整自身

获取窗口在屏幕的位置

1.IE提供了window.screenLeft和window.screenTop属性来判断窗口的位置
2.标准浏览器提供了 window.screenX和window.screenY属性来判断窗口的位置
获取窗口的大小
1.标准浏览提供了window.innerHeight和window.innerWidth来获取浏览器显示区域的大小，该属性被IE9+支持，但是低版本IE不支持，如果需要在低版本IE下获取大小，使用：
document.documentElement.clientWidth||document.body.clientWidth 来获取宽
document.documentElement.clientHeight||document.body.clientHeight 来获取高
2.标准浏览器还提供了window.outerHeight和window.outerWidth来获取浏览器自身的大小

screen.height 显示器的总高度
screen.width 显示器的总宽度
screen.availWidth 显示器的可使用宽度
screen.availHeight 显示器的可使用宽度

location的属性

hash: 设置或者返回从#号开始的url(锚点)
host： 设置或者返回主机名或者url的主机名(包含端口号)
hostname： 设置或者返回当前url的主机名
href： 设置或者返回完整的url
pathname： 设置或者返回当前url的路径部分
port： 设置或者返回当前url的端口号
protocol： 设置或者返回当前url的协议
search： 设置或者返回以？号开始的url参数部分

	console.log('主机：'+location.host);
	console.log('主机名：'+location.hostname);
	console.log('href：'+location.href);
	console.log('origin：'+location.origin);
	console.log('pathname：'+location.pathname);
	console.log('端口：'+location.port);
	console.log('协议：'+location.protocol);
	console.log('参数：'+location.search);

	var bd = document.getElementById('bd');
	bd.onclick = function(){
		location.href = 'http://www.baidu.com';
	}
	var f5 = document.getElementById("f5");
	//刷新就是把当前的url添加到当前的地址栏中
	f5.onclick = function(){
		location.href = location.href;
//		location = location
	}
	function rand(m,n){
		var r = Math.floor(Math.random()*(n-m+1))+m;
		var g = Math.floor(Math.random()*(n-m+1))+m;
		var b = Math.floor(Math.random()*(n-m+1))+m;
		return 'rgb('+r+','+g+','+b+')';
	}
	document.documentElement.style.background = rand(0,255);
	/*
	 location常用的方法
	 assign() 加载新的文档，参数是需要加载的文档地址url，他和直接把url赋值给href属性是等价的
	 reload() 重新加载当前的文档，等价于Ctrl+F5
	
	
	 * */
	var sina = document.getElementById("sina");
	sina.onclick = function(){
		location.assign('http://www.sina.com');
	}
	var ctrl = document.getElementById("ctrl");
	ctrl.onclick = function(){
		location.reload();
	}
	
	var jd = document.getElementById("jd");
	jd.onclick = function(){
		location.replace('http://www.jd.com');
	}

navigator浏览器嗅探

appCodeName 返回浏览器的代码名
appName 返回浏览器名
appVersion 返回浏览器的平台和版本信息
language 返回浏览器的语言
cookieEnabled 表示浏览器中是否使用cookie，是一个布尔值
onLine 返回是否处于脱机模式的布尔值
platform 返回运行浏览器的操作平台
userAgent 返回由客户机发送服务的user-agent头部值，总体来说就是当前浏览器的信息，包括，生产厂商，浏览器内核，浏览器版本