JS之BOM

最新推荐文章于 2024-05-31 00:35:54 发布

dweblover

最新推荐文章于 2024-05-31 00:35:54 发布

阅读量741

点赞数 2

分类专栏： JavaScript 文章标签： JS基础

本文链接：https://blog.csdn.net/dweblover/article/details/86766493

版权

JavaScript 专栏收录该内容

17 篇文章 2 订阅

订阅专栏

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

Screen-代表用户的屏幕信息，通过该对象可以获取到用户显示器的相关信息。（不常用）
总结：这些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”
location=“three.html”
（3）assign(),用来跳转到其他页面，作用和直接修改location一样
location.assign(“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>

dweblover

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
JS之BOM

1.BOM定义BOM（浏览器对象模型），BOM可以使我们通过JS来操作浏览器，在BOM中为我们提供了一组对象，用来完成对浏览器的操作。2.BOM对象1. Window-代表整个浏览器的窗口，同时window也是网页中的全局对象。2. Navigator（航海家）-代表当前浏览器的信息，通过该对象可以用来识别不同的浏览器。由于历史原因，navigator对象中的大部分属性都已经不能帮助我们识...
复制链接

扫一扫