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>