web前端开发第二阶段——BOM浏览器对象模型

本文链接：https://blog.csdn.net/qq_43151638/article/details/103170470

本文详细探讨了BOM（浏览器对象模型）中的关键概念，包括navigator对象用于获取浏览器信息，event事件的处理，如滚轮滚动方向的判断；介绍了懒加载和预加载策略；重点讲解了window对象的各种属性和方法，如窗口大小获取、新窗口的打开与关闭、frames集合的使用，以及history和location对象在页面导航中的作用。同时，文章还涉及到了地理定位事件的处理以及百度地图JavaScript API的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、浏览器代理信息navigator

浏览器用户管理
window.navigator.userAgent

二、event事件

wheelDelta 滚动方向(谷歌浏览器） >0 为向上滚动 <0 为向下滚动
detail滚动方向(火狐浏览器）>0 为向下滚动 <0 为向上滚动

封装的js

/*
	鼠标滚轮兼容浏览器
	参数：
		obj:添加滚轮事件的元素
		upFn:向上执行函数
		downFn:向下执行函数
*/


function wheel(obj, upFn, downFn) {
	//BOM代理判断是什么浏览器
	var str = window.navigator.userAgent;
	if (str.indexOf('Chrome') != -1) {
		//谷歌,wheelDelta
		obj.addEventListener('wheel', function(ev) {
			ev = ev || window.event;
			//向上滚动
			if (ev.wheelDelta > 0) {
				typeof upFn == 'function' && upFn();
			}
			//向下滚动
			if (ev.wheelDelta < 0) {
				typeof downFn == 'function' && downFn();
			}
		})
	} else if (str.indexOf('Firefox') != -1) {
		//火狐,判断滚轮方向  detail
		obj.addEventListener('DOMMouseScroll', function(ev) {
			ev = ev || window.event;
			if (ev.detail > 0) {
				// down
				typeof downFn == 'function' && downFn();
			} else {
				// up
				typeof upFn == 'function' && upFn();
			}
		})
	} else if (str.indexOf('MSIE') != -1) {
		//IE
	}
}

三、懒加载11月18号学习

按需加载

三、预加载

通过js代码预先把图片加载到浏览器，通过一个函数，Image()
用法：
首先var img=new Image():会得到一个对象，对象下面有一个src属性
load属性：onload事件，当图片加载完毕触发（检测你下载文件需要的时间）
例如 img.οnlοad=function(){代码}
img.src:设置图片路径
onerror:加载失败时触发的事件

		<script type="text/javascript">
			var arr=['img/1.png','img/2.jpg','img/3.jpg','img/4.jpg'];
			var num=0;
			document.onclick=function(){
				for(var i=0;i<arr.length;i++){
					//首先
					var img=new Image();
					img.src=arr[i];

					//检测当前图片是否加载完毕
					img.onload=function(){
						num++;
						//当图片全部执行后才执行
						if(num==arr.length){
							console.log('ok')
						}
					}
					img.onerror=function(){
						console.log('图片加载失败')
					}
				}
			}
			
		</script>

三、BOM(browser object model)

对浏览器进行设置或获取其他信息
window:是浏览器最大的一个实例对象

1、获取浏览器窗口大小

window.innerWidth:宽度
window.innerHeight:高度

2、创建窗口window.open()

参数：可选

参数一：页面（网站）地址/路径
参数二：是否打开新窗口 _self:当前窗口 _blank:开启新窗口
参数三：设置新窗口大小
用法：
window.open(‘地址’,’_self’,‘width=200,height=300’)

3、关闭当前窗口close()

ps:
1)在谷歌和火狐浏览器中，只能关闭用脚本打开的页面window.open()
2)在谷歌中，不区分是当前窗口还是新窗口，都可以关闭，而火狐浏览器只能关闭新窗口开启的页面
3）IE可以直接关闭，不用脚本打开，关闭时会提示是否关闭

4、frames

是一个集合，集合里面是引进的所有iframe页面，可以对页面里面引进的iframe子窗口

5、history 历史管理，浏览器访问历史记录

back:返回上一个
forward:前进（下一个）
go(n) 参数是数字正数前进n个，负数后退n个，0刷新当前

	<body>
		<button type="button">前进</button>
		<button type="button">后退</button>
		<button type="button">go</button>
		<script type="text/javascript">
			var btn=document.querySelectorAll('button');
			var history=window.history;
			btn[0].onclick=function(){
				history.forward();
			}
			btn[1].onclick=function(){
				history.back();
			}
			btn[2].onclick=function(){
				// history.go(1);
				// history.go(-1);
				history.go(0);
			}
			
		</script>
	</body>

6、location:设置网址信息URL 对象

属性：
hash:设置url中的锚（浏览器地址栏里面#后面的值）重新设置不刷新页面 location.hash
hash值发生改变会触发一个事件window.onhashchange
seach:浏览器地址栏里面？后面的值重新设置刷新页面
ps:地址只能是search在前，hash值在后;二者设置时会自动加上？和#符号
host:获取或者设置url的主机（端口号）

本机地址：127.0.0.1:8848或者localhost

<script type="text/javascript">
	document.onclick=function(){
		//window.location.assign('http://www.baidu.com');
		// var a=location.host;//主机,端口
		// var b=location.hash;//获取url的锚
		
		//window.location.reload()//刷新页面
		
		window.location.replace('http://127.0.0.1:8848/11-19/location.html')
		// console.log(b)
	}
</script>

方法：
assign():加载新页面（文档）参数为页面地址
reload():重新加载，刷新
replace():替换当前文档（不会将替换的地址存放在地址记录）
href:网页地址（可以获取修改），可以做刷新

三、定位事件

window.navigator.geolacation

对象：
getCurrentPosition()：（谷歌无效）火狐IE可以
用法：window.navigator.geolacation.getCurrentPosition(function(){},function(){},{})
参数：
参数一：函数,获取到位置成功后调用的函数
自定义参数position:console.log(自定义参数)：会获得一个coords对象：里面包括经纬度等
coords.latitude:精度
coords.longitude:纬度
参数二：函数,获取位置失败后调用的函数，自定义参数error:console.log(自定义参数)：会获得一个报错信息对象：可以查看出错原因
参数三：对象：配置信息 timeout:3000

watchPosition()
clearWatch()

三、百度地图javascript API

OCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>获取定位信息</title>
		//第一步引进js,密钥可以自己申请，也可以用别人分享的
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=PlhFWpA02aoURjAOpnWcRGqw7AI8EEyO "></script>
		<style type="text/css">
			
			#container{
				width: 800px;
				height: 600px;
				margin: 0px auto;
				border: 3px sild #000000;
			}
		</style>
	</head>
	<body>
		<div id="container"></div>
		<script type="text/javascript">
			var address=window.navigator.geolocation;
			address.getCurrentPosition(function(position){
				/*
				position:自定义属性
					coords:
						latitude:经度
						longitude:纬度
				*/
				//获取到所在地点的经纬度
			   var j=position.coords.latitude;
			   var w=position.coords.longitude;
				//demo模板
			   var mp = new BMap.Map("container");
			       mp.centerAndZoom(new BMap.Point(w,j), 10);
			       mp.enableScrollWheelZoom();
			   
			   //     var canvasLayer = new BMap.CanvasLayer({
			   //         update: update
			   //     });
			   
			   //     function update() {
			   //         var ctx = this.canvas.getContext("2d");
			   
			   //         if (!ctx) {
			   //             return;
			   //         }
			   
			   //         ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
			   
			   //         var temp = {};
			   //         ctx.fillStyle = "rgba(50, 50, 255, 0.7)";
			   //         ctx.beginPath();
			   //         var data = [
			   //             new BMap.Point(116.297047,39.979542),
			   //             new BMap.Point(116.321768,39.88748),
			   //             new BMap.Point(116.494243,39.956539)
			   //         ];
			   
			   //         for (var i = 0, len = data.length; i < len; i++) {
			   //             var pixel = mp.pointToPixel(data[i]);
			   //             ctx.fillRect(pixel.x, pixel.y, 30, 30);
			   //         }
			   //     }
			   //     mp.addOverlay(canvasLayer);
			},function(error){
				console.log(error)
			},{
				timeout:3000
			})
		</script>
	</body>
</html>