JavaScript 之 BOM

BOM

BOM(Bowser Object Model)   浏览器对象模型

提供了独立于页面内容而与浏览器就行交互的对象，核心对象是window。

（BOM 无标准支持）

Navigator

浏览器代理检测    navigator.userAgent

判断浏览器类型

var str = navigator.userAgent;
			if(str.indexOf("Chrome") != -1){
				alert("谷歌");
			}else if(str.indexOf("Firefox") != -1){
				alert("火狐")
			}

通过   navigator.userAgent  可以检测是移动端还是PC端

var arr = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
			var str = navigator.userAgent;
			for(var i = 0; i < arr.length; i++){
				if(str.indexOf(arr[i]) != -1){
					location.href = "mobile.html";
				}
			}

BOM  Location

属性：hash、host、hostname、href、pathname、port、protocol、search

方法：assign(url), replace(url) , reload()

console.log(location.href);

location.href = "http://www.baidu.com";

location.assign("mobile.html");      //跳转了可以返回

location.replace("mobile.html");    //跳转了不能返回

reload（）;                                     //刷新页面；

BOM Histiry

history对象保存着用户上网的历史记录,从窗口被 打开的那一刻算起.

后退一页  history.go(-1)        history.back()

前进一页  history.go(1)         history.forward()

前进两页  history.go(2)

（必须有历史记录才能前进后退）

scrollTop：  可视区域距离页面顶部的距离

例：scrollTop=document.documentElement.scrollTop  || document.body.scrollTop

scrollLeft:    可视区域距离页面左边的距离

例：scrollLeft=document.documentElement.scrollLeft  || document.body.scrollLeft

clientWidth：  可视区域的宽度

例：document.documentElement.clientWidth

clientHeight:   可视区域的高度

例：document.documentElement.clientHeight

onload & onscroll & onresize

//页面加载完毕或者资源加载完毕时触发
            window.onload = function(){
                console.log(box);
            }
            
        </script>
        <div id="box"></div>

			//滚动条滚动时触发
			window.onscroll = function(){
				var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
				console.log(scrollTop);
			}

//浏览器窗口改变时触发
			window.onresize = function(){
				console.log("aaaa");
			}

 定时器和延时器

setInterval()        定时器， 每隔一段时间调用某个函数（调用多次）只产生一个计时器，只能通过clearInterval()方法才能停止该方法

setTimeout()        延时器， 隔一段时间调用某个函数（只调用一次）相当于每次产生一个计时器，计时器时间到了就会销毁。

系统自带弹出式消息提醒的方式 

1. window.alert(string);警告框       （无返回值）

2. window.confirm();确认框 返回值为boolean 确定：true 取消：false                 （有返回值）

3. window.prompt(); 可输入的对话框 返回值为string 输入的信息