BOM浏览器对象

BOM:浏览器对象

作用:提供一系列对象用于与浏览器窗口进行交互。eg: 获取浏览器信息,操作浏览器

window（浏览器窗口对象,主要用于操作浏览器，js中最大的对象,BOM核心对象）
location（地址栏对象 - 提供了对地址栏操作的方法和属性）
history（浏览历史对象，提供了对浏览器历史记录操作的方法和属性）
screen（屏幕对象，获取屏幕的信息）
navigator（浏览器对象，提供了获取浏览器信息的方法和属性）
document（文档对象， - 代表整个网页，DOM的根节点）

window对象:

    window.innerWidth   //获取可视区域的宽度
    document.documentElement.clientWidth	 //兼容IE的写法

    window.innerHeight  //获取可视区域的高度
    document.documentElement.clientHeight		//兼容IE的写法

方法：

alert(要显示的文本)     //弹出信息框
prompt(输入框提示信息,输入框默认值)     //弹出输入框，点击确定，返回字符串，点击取消，返回null
confirm(确认框提示的信息)       //点击确定返回true，点击取消返回false
close()     //关闭浏览器（火狐不支持！），但都支持通过别的网页打开的新的网页关闭
            //不允许关闭非脚本打开的页面
open(待打开的网页url,窗口名name,打开窗口的外观feature,replace)
    //url，可选，要在新窗口中显示的文档的URL
    //name，可选，声明了新窗口的名称
    //feature，replace自行扩展
    //谷歌会默认把系统自动打开的新网页阻止掉，但不阻止通过事件打开的网页

window内置子对象

1.history对象:该对象包含浏览器访问过的url

该对象的属性：
    history.length;      //返回当前窗口历史记录的数量

该对象的方法：
    history.back();      //后退，加载前一个url。
    history.forward();   //前进，需要后退一下之后，才有前进的方向
    history.go(num);     //参数为正，前进相应的数目，为负，后退相应的数目，为0，刷新

// 输出浏览过的历史长度
    console.log(history.length);

//a.html在其中添加超链跳到b.html
	//a.html
		//body
	    <a href="./b.html">点我跳转</a>
	     <br />
	    <input type="button" value="goForward" onclick="goForward()">
	    //js
	      function goForward(){
	          window.history.forward();
	     }  
	//b.html
		//body
		<input type="button" value="goBack" onclick="goBack()">
		<input type="button" name="" value="使用go后退" onclick="go()" id="">
	//js
     function goBack(){
         window.history.back(); //点我返回
     }
     function go(){
        // 将go的参数设为正的,让其前进
        //将go的参数设为负的,让其后退
        //将go的参数设为0，表示刷新
        window.history.go(-1);
      }
     var len  = window.history.length;   // 当前窗口浏览总长度
     console.log(len);

2.location对象：包含当前url的相关信息，而history对象不能具体反映url的相关信息

   该对象的属性：
       location.href;       //设置或返回完整的url
       location.search;     //返回url?后面的查询部分
       location.hash;       //是一个可读写的字符串，是url的锚部分（从#开始的部分）

   该对象的方法：
       location.reload();   //刷新页面的方法，一般情况下，传递一个true，不使用缓存刷新

   平时在第一个#后面出现的任何字符，都会被浏览器解读为位置标识符。
   这意味着，这些字符都不会被发送到服务器端。
   比如，下面URL的原意是指定一个颜色值：
   　　http://www.example.com/?color=#fff
   　　JD秒杀的页面,点击不同商品,#后数字不同
   　　   https://miaosha.jd.com/#11782112078

<input type="button" value="获取网址" onclick="getUrl();" />
<input type="button" value="跳转网址" onclick="goUrl();"/>
<input type="button" value="刷新网页" onclick="shuaXin();" /> 

<script>
// 创建获取网址方法
function getUrl(){
    console.log(location.href);	
}

// 创建跳转网址方法
function goUrl()
{
    // location.href = 'http://baidu.com'; // 跳转百度
    location.href = './test.html'; 
}


// 创建刷新网址方法
function shuaXin(){
    location.reload(); 
}

</script>

3.navigator对象

 navigator.appName;   //返回当前浏览器的名称
 navigator.appVersion;//返回当前浏览器的版本号
 navigator.platform;  //返回当前计算机的操作系统

 以上方法已经在逐渐被抛弃，出现一个新的属性替代这些属性：
 navigator.userAgent; //返回浏览器信息

//当前浏览器的名称
   console.log(navigator.appName);
//当前浏览器的版本号
   console.log(navigator.appVersion)
//当前计算机的操作系统
   console.log(navigator.platform)
//返回浏览器信息
   console.log(navigator.userAgent)

4.window.onscroll／onresize ／onload()事件

1.window.onscroll 页面发生滚动时执行一些操作

页面滚动条距离顶部的距离
document.documentElement.scrollTop
document.body.scrollTop(兼容写法)

页面滚动条距离左边的距离
document.documentElement.scrollLeft
document.body.scrollLeft(兼容写法)

2.window.onresize 窗口大小发生改变时执行一些操作

3.window.onload() 文档加载完成后执行一些操作
例子：页面加载完出现的小广告

区别：window.onload和$(document).ready{}
window.onload：

1.执行时间：所有元素加载完毕才会执行，不需要考虑加载顺序
2.编写格式不同：不能同时编写多个，有多个的话只会执行一个

$(document).ready{}：

1.执行时间：DOM结构绘制完毕后就执行，不需要等到加载完成
2.编写格式不同：能同时编写多个，且多个都会执行

案例:js模仿固定定位及缓慢回到顶部

//css
	body{height: 3000px;}
	.top{position: absolute;line-height: 30px;padding: 0 10px;background: #ccc;left: 0;top:100px;}
//body
	<h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1>
	<div class="top">回到顶部</div>

//js
	// 固定定位
	// 设置提示框的初始oldTop
    var oldTop=100;
    //获取div节点
    var obox= document.getElementsByClassName('top');  
    obox= obox[0];
    // var obox= document.querySelector(".top")
    // 1 检测到滚动条,是否发生变化
    window.onscroll = function(){
       // 2 滚动条变化时,获取滚动条到顶部的位置
       var top = document.documentElement.scrollTop;
         // 3 将滚动条的距离加到定位的top上
          // 添加高度,使用js设置高度时,要加px
           obox.style.top = top + 100 + 'px';
    }
    
	// 缓慢回到顶部
	var timer;
	//		1.绑定事件
			obox.onclick = function(){
	//			2.开启之前先清除
				clearInterval(timer);
	//			3.正式开启计时器
				timer = setInterval(function(){
	//				4.先获取滚动的距离
					var t = document.documentElement.scrollTop;
	//				5.不断判断是否到顶
					if(t <= 0){
	//					6.到顶就停下
						clearInterval(timer)
					}else{
	//					7.没到顶就向上滚动
						document.documentElement.scrollTop = t-=10;
					}
				},30)
			}