JS 基础（6）BOM（BrowserObjectModel浏览器对象模型）—— BOM基础

本文链接：https://blog.youkuaiyun.com/weixin_39141044/article/details/80067293

什么是BOM?

bom 是browser object model 也就是浏览器对象模型，BOM由多个对象组成，其中代表浏览器窗口的window对象是BOM的顶层对象，其他对象都是该对象的子对象。

顶层对象：window

子对象：location、history、screen、navigator、document、event

一.window对象

window对象的方法

（一）alert 警告框

语法：window.alert()；或者 alert()；

功能：显示一段带有消息和确认按钮的警告框

说明：我们一般都是省略window简写

（二）confirm 选择框

语法：window.confirm()；或 confirm()；

功能：显示一个带有指定消息的和确定及取消按钮的对话框

返回值：用户点击确定，confirm() 返回true

用户点击取消，confirm() 返回false

<script>
var value = confirm("confirm选择框");
if(value){
	console.log(1);
}else{
	console.log(2);
}
</script>

（三）prompt 输入框

语法：window.prompt( text[,defaultText] )；或者 prompt( text[,defaultText] )；

参数：

text：要在对话框中显示的纯文本（不是HTML格式文本）

defaultText：默认的输入文本

返回值：如果用户点击提示框的取消按钮，则返回null

如果用户点击确定按钮，则返回输入的内容

（四）open 打开一个新窗口

语法：window.open(pageURL，name，parameters)

功能：打开一个新的浏览器窗口或查找一个已名称的窗口

参数：

pageURL：子窗口路径

name：子窗口的名字

parameters：窗口参数（各参数用逗号分隔）

width 窗口宽度、

height 窗口高度、

left 窗口X轴坐标、top 窗口Y轴坐标

toolbar 是否显示浏览器工具栏（yes/no）、

menubar 是否显示菜单栏（yes/no）、

scrollbars 是否显示滚动条（yes/no）、

location 是否显示地址字段

status 是否添加状态栏

function openMailBox(){
	window.open('__APP__/Admin/MessageNotice/mailBoxNew','消息通知','width=800,height=600,left=30%,top=30%,toolbar=no,menubar=no,location=no,status=no');
}

（五）close 关闭浏览器窗口

语法：window.close（）

功能：关闭浏览器窗口

（六）setTimeout 超时调用

语法：setTimeout（code，millisec）

功能：在指定的毫秒数后调用函数或计算表达式

参数：

1.code：要调用的函数名或要执行的js代码串

2.millisec：在执行代码前需等待的毫秒数

PS：setTimeout()只执行code一次。如果要多次调用请使用setInterval() 或者让code调用自己

<script>
	//匿名函数
	setTimeout(function(){console.log(1)},2000);

	//声明函数
	setTimeout(fn,3000);    //不要写成setTimeout(fn(),3000); 函数名() 这样会直接调用函数
	function fn(){
		console.log(2);
	}
</script>

（七）clearTimeout 清除超时调用

语法：clearTimeout(id_of_settimeout)；

功能：取消由setTimeout()方法设置的超时调用

参数：

1.id_of_sttimeout：由setTimeout() 返回的ID值，该值标识要取消的延迟代码块。

<script>
	//匿名函数
	var ID = setTimeout(function(){console.log(1)},2000);
	clearTimeout(ID);    //这样 超时调用将不会被执行
</script>

（八）setInterval 间歇调用

语法：setInterval（code，millisec）

功能：每隔指定的时间执行一次代码

参数：

1.code：要调用的函数名或要执行的js代码串

2.millisec：在执行代码前需等待的毫秒数

<script>
	//匿名函数
	var ID = setInterval(function(){console.log(1)},2000);

	//声明函数
	setInterval(fn,3000);
	function fn(){
		console.log(2);
	}
</script>

实现简单动画效果例子

<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>闪烁的文字</title>
        <style type="text/css">
            div{
                width:200px;
                height:200px;
                line-height:200px;
                border:2px solid gray;
                text-align:center;
                color:red;
            }
        </style>
    </head>
<body>
    <h3>会闪烁的文字</h3>
        <div id="text"></div>
        <script>
        	var fontStatus=0;
            var textDiv = document.getElementById("text");
            setInterval(change,500);
            function change(){
            	if(fontStatus){	//疑问部分
            		status = 1;
            		textDiv.innerHTML = "★★★今日特卖★★★";        
            	}else{
            		status = 0;
            		textDiv.innerHTML = "☆☆☆今日特卖☆☆☆";            	
            	}
            }
        </script>
    </body>
</html>

（九）clearInterval 清除间歇调用

语法：clearInterval（id_of_setinterval）

<script>
	//匿名函数
	var ID = setInterval(function(){console.log(1)},2000);
	clearInterval(ID);
</script>

二、location对象

location对象提供了与当前窗口中加载的文档有关的信息，还提供了功能，它既是window对象的属性，也是document对象的属性

（一）location.href 获取url

1.获取url

语法：location.href

功能：返回当前加载页面完整url

说明：location.href和window.location.href等价（window可以省略）

<script>
	console.log(location.href);
</script>

2.设置url

语法：location.href = 'url';

功能：使网页加载到指定的url地址上

<script>
	location.href = '//www.baidu.com';    //建议写网站的时候不要加http://
</script>

（二）location.hash 获取锚点链接

1.获取锚点

语法：location.hash

功能：返回url中的hash（#以及后面的字符），如果不包含，返回空字符串

<script>
//当前url为例:http://localhost/Web/JS/dom.html#fuck
	console.log(location.hash);    //输出#fuck
</script>

2.设置锚点

语法：location.hash = '#param';

功能：为url添上指定的锚点，实现页面上的锚点位置跳转

<a href="#bottom">到底部</a>
<div id="div1" class="red" data-name="poorpenguin" style="height: 1000px;">
	<p>测试1</p>
</div>
<div>
	<p>测试2</p>
</div>
<a id="bottom">这是底部</a><!-- 这是锚点 -->

<script>
	//当前url为例:http://localhost/Web/JS/dom.html
	location.hash = '#bottom';    //打开当前页面会默认转到location.hash的指定的锚点位置
</script>

（三）location对象其他常用属性

<script>
	//当前url为例:http://localhost/Web/JS/dom.html?id=1&name=poorpenguin
	console.log(location.host);	//返回服务器名称和端口号(如果有)	localhost
	console.log(location.hostname);	//返回不带端口号的服务器名称	localhost
	console.log(location.pathname);	//返回url中的目录和文件名	        /Web/JS/dom.html

	console.log(location.port);	//返回url中指定的端口号，如果没有，返回空字符串
	console.log(location.protocol);	//返回页面使用的协议	        http:
	console.log(location.search);	//返回url的查询字符串，这个字符串以问号开头	?id=1&name=poorpenguin
</script>

（四）location.replace 重新定向URL

语法：location.replace(url)

功能：重新定向URL

说明：使用location.replace不会在历史记录中生成新记录（没有后退按钮）

<script>
	location.replace('//wwww.baidu.com');    //页面对跳转到www.baidu.com
</script>

（五）location.reload 重新加载当前显示的页面

语法：location.reload()

功能：重新加载当前显示的页面

说明：location.reload()有可能从浏览器缓存中加载

location.reload(true)强制从服务器重新加载

三、history对象

history对象保存了用户在浏览器中访问页面的历史记录

（一）history.back()

语法：history.back()

功能：回到历史记录的上一步

说明：相当于使用了history.go(-1)

（二）history.forward()

语法：history.forward()

功能：回到历史记录的下一步

说明：相当于使用了history.go(1)

（三）history.go(-n)

语法：history.go(-n)

功能：回到历史记录的前n步

（四）history.go(n)

语法：history.go(n)

功能：回到历史记录的后n步

四、screen对象

screen对象包含有关客户端显示屏幕的信息

（一）screen.availWidth(可用屏幕宽度)和screen.availHeight(可用屏幕高度)

<script>
	console.log("屏幕宽度"+screen.availWidth);    //是定死的屏幕宽度
	console.log("屏幕高度"+screen.availHeight);    //是定死的屏幕高度
</script>

（二）window.innerWidth(窗口文档显示宽度)window.innerHeight(窗口文档显示高度)

	console.log("pageWidth："+window.innerWidth);    //就是浏览器显示页面的窗口宽度
	console.log("pageHeight："+window.innerHeight);    //就是浏览器显示页面的窗口高度

五、navigator对象

提供了用户的浏览器、操作系统等信息，可通过当前对象得知用户所用浏览器类型、版本等。

（一）navigator.userAgent 用来识别浏览器名称、版本、引擎、以及操作系统等信息

语法：navigator.userAgent

例子：判断用户的浏览器类型

<meta charset="UTF-8">
<title>userAgent</title>
</head>
<body>
<input type="button" value="点击获取浏览器信息" id="browser">
<script type="text/javascript">
document.getElementById("browser").onclick=function(){
    var browserInfo = navigator.userAgent;
    var browerName = judgeTypeOfBrowser(browserInfo);
    alert('您使用的浏览器是 '+browerName+' 浏览器');
}

/*判读浏览器类型*/
function judgeTypeOfBrowser(browerInfo){
    var browerInfoLowerCase = browerInfo.toLowerCase(); //转小写
    //浏览器种类
    var browser = [
      {type:'msie',name:'IE浏览器'},
      {type:'firefox',name:'火狐浏览器'},
      {type:'chrome',name:'谷歌浏览器'},
      {type:'safari',name:'Safari浏览器'}
    ];
    for(var i=0,len=browser.length; i<len; ++i){
      if(browerInfoLowerCase.indexOf(browser[i].type)>0)return browser[i].name; //返回
    }
    return '未知';
}
</script>
</body>
</html>