JS之BOM

川长思鸟来 2022-04-23 09:24 197阅读 0赞

**1.BOM定义**  
BOM（浏览器对象模型），BOM可以使我们通过JS来操作浏览器，在BOM中为我们提供了一组对象，用来完成对浏览器的操作。  
**2.BOM对象**  
1. Window-代表整个浏览器的窗口，同时window也是网页中的全局对象。  
2. Navigator（航海家）-代表当前浏览器的信息，通过该对象可以用来识别不同的浏览器。由于历史原因，navigator对象中的大部分属性都已经不能帮助我们识别浏览器了。一般我们只会使用userAgent来判断浏览器的信息，userAgent是一个字符串，这个字符串中包含有用来描述浏览器信息的内容，不同的浏览器会有不同的userAgent。  
3. Location（地址）-代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面。  
4. History-代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录。由于隐私的原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页，而且该操作只在当次访问时有效。

1.  Screen-代表用户的屏幕信息，通过该对象可以获取到用户显示器的相关信息。（不常用）
2.  总结：这些BOM对象在浏览器中都是作为window对象的属性保存的。可以通过window对象来使用，也可以直接使用。（如，window.navigator或者navigator）  
    **3.用Navigator（航海家）来判断浏览器信息**

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>navigator</title>
    <script type="text/javascript">
    //判断一个字符串中是否有Firefox(用正则表达式)
    //在IE11中已经将微软和IE相关的标志都已经去除了，所以我们基本已经不能通过userAgent来标志一个浏览器是否是IE11
    //如果通过userAgent不能判断，还可以通过一些浏览器中特有的对象来判断浏览器的信息。比如，ActiveXObject
    var ua=navigator.userAgent;
    console.log(ua);
    if(/firefox/i.test(ua))
    {
    	alert("我是火狐浏览器");
    }
    else if(/chrome/i.test(ua))
    {
    	alert("我是谷歌浏览器");
    }
    else if(/msie/i.test(ua))
    {
    	alert("我是IE浏览器");
    }
    else if("ActiveXObject" in window)
    {
    	alert("我是IE11");
    }
    </script>
    </head>
    <body>
    </body>
    </html>

**4. History-代表浏览器的历史记录**  
（1）length可以获取到当次访问链接的数量  
alert(history.length);  
（2）back(),可以用来回退到上一个页面，作用和浏览器的回退按钮一样  
history.back();  
（3）forward(),可以跳转到下一个页面，作用和浏览器前进按钮一样  
history.forward();  
（4）go(),可以用来跳转到指定页面，他需要一个整数作为参数，1，表示向前跳转一个页面相当于forward，2，表示向前跳转2个页面；-1，表示向后跳转一个页面相当于back(),-2,表示向后跳转2个页面

**test01页面**
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>history练习</title>
    <script type="text/javascript">
    </script>
    </head>
    <body>
    <h1>TEST01</h1>
    <a href="test02.html">去test02.html</a>
    </body>
    </html>
    
    **test02页面**
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    </head>
    <body>
    <h1>TEST02</h1>
    <a href="02.history.html">去02.history.html</a>
    </body>
    </html>
    
    **02.history页面**
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    </head>
    <script type="text/javascript">
    window.function()
    {
    	//获取按钮
    	var btn=document.getElementById("btn01");
    	//绑定事件
    	btn.onclick=function()
    	{
    		//length可以获取到当次访问链接的数量
            //alert(history.length);
    		//back(),可以用来回退到上一个页面，作用和浏览器的回退按钮一样
    		//history.back();
    		//forward(),可以跳转到下一个页面，作用和浏览器前进按钮一样
    		//history.forward();
    		//go(),可以用来跳转到指定页面，他需要一个整数作为参数，1，表示向前跳转一个页面相当于forward，2，表示向前跳转2个页面；-1，表示向后跳转一个页面相当于back(),-2,表示向后跳转2个页面
    		history.go(-2);
    	};
    };
    </script>
    <body>
    <button id="btn01">点我一下</button>
    <h1>history</h1>
    <a href="three.html">去three.html</a>
    </body>
    </html>
    **three页面**
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>实战</title>
    <style type="text/css">
    *{
    	margin:0px;
    	padding:0px;
    }
    #outer{
    	width:426px;/*图片的宽高度自适应*/
    	padding:10px;/*内边距为10*/
    	margin:50px auto;/*让整个div居中*/
    	background-color:#66FFFF;/*设置背景颜色*/
    	text-align:center;/*使按钮居中*/
    }
    </style>
    <script type="text/javascript">
    //onload的作用是等事件加载完以后才执行此程序
    window.function()
    {
    	//获取按钮事件
    	var bt1=document.getElementById("pre");
    	var bt2=document.getElementById("next");
    	//获取img标签中的第一个元素结点
    	var img=document.getElementsByTagName("img")[0];
    	//创建一个数组用来保存图片的路径（即src属性）
    	var imgarr=["img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"];
    	//设置数组的索引下标
    	 var index=0;
    	 //获取p标签
    	var pbq=document.getElementById("pid");
    	//设置提醒文字
    	pbq.innerHTML="共有"+imgarr.length+"张图片,当前第"+(index+1)+"张";
    	//绑定事件
    	bt1.onclick=function()
    	{
    		//书写事件驱动程序
    		index--;//切换到上一张索引自减
    		//判断索引是否小于0
    		if(index<0)
    		{
    			index=imgarr.length-1;//目的是可以实现循环切换
    		}
    		//修改img的src属性
    		img.src=imgarr[index];
    		//当点击按钮以后，重新设置p标签中的显示内容
    		pbq.innerHTML="共有"+imgarr.length+"张图片,当前第"+(index+1)+"张";
    	};
    	//绑定事件
    	bt2.onclick=function()
    	{
    		//书写事件驱动程序
    		index++;//切换到下一张索引自加
    		//判断索引是否大于4
    		if(index>imgarr.length-1)
    		{
    			index=0;//目的是可以实现循环切换
    		}
    		//修改img的src属性
    		img.src=imgarr[index];
    		//当点击按钮以后，重新设置p标签中的显示内容
    		pbq.innerHTML="共有"+imgarr.length+"张图片,当前第"+(index+1)+"张";
    	};
    };
    </script>
    </head>
    <body>
    <div id="outer">
    <p id="pid"></p>  
    <img src="img/2.jpg">
    <button id="pre">上一张</button>
    <button id="next">下一张</button>
    </div>
    </body>
    </html>

**5.location**  
（1）如果直接打印location，则可以获取到地址栏的信息（当前页面的完整路径）  
alert(location);  
（2）如果直接将location属性修改为一个完整的路径，或者相对路径则页面会自动跳转到该路径，并且生成相应的历史记录。  
location=“[http://www.baidu.com][http_www.baidu.com]”  
location=“three.html”  
（3）assign(),用来跳转到其他页面，作用和直接修改location一样  
location.assign(“[http://www.baidu.com][http_www.baidu.com]”);  
（4）reload(),重新加载当前文档,相当于刷新按钮.(如果在方法中传递一个true作为参数，则会强制清空缓存)  
location.reload(true);  
（5）replace(),可以使用一个新的页面替代当前页面，不会生成历史记录  
location.replace(“three.html”);

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    </head>
    <script type="text/javascript">
    window.function()
    {
    	//获取按钮
    	var btn=document.getElementById("btn01");
    	//绑定事件
    	btn.onclick=function()
    	{
    		//如果直接打印location，则可以获取到地址栏的信息（当前页面的完整路径）
    		//alert(location);
    		//location="http://www.baidu.com"
    		//location="three.html"
    		//assign(),用来跳转到其他页面，作用和直接修改location一样
    		//location.assign("http://www.baidu.com");
    		//reload(),重新加载当前文档,相当于刷新按钮.(如果在方法中传递一个true作为参数，则会强制清空缓存)
    		//location.reload(true);
    		//replace(),可以使用一个新的页面替代当前页面，不会生成历史记录
    		location.replace("three.html");
    	};
    };
    </script>
    <body>
    <button id="btn01">点我一下</button>
    <h1>loacion</h1>
    <a href="three.html">去three.html</a>
    </body>
    </html>

[http_www.baidu.com]: http://www.baidu.com