BOM浏览器对象模型

最新推荐文章于 2023-03-25 20:59:16 发布

好吃的都给你呀

最新推荐文章于 2023-03-25 20:59:16 发布

阅读量167

点赞数

分类专栏： #前端思维框架文章标签： BOM

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_39565202/article/details/103374125

版权

#前端思维框架专栏收录该内容

18 篇文章 0 订阅

订阅专栏

BOM Browser Object Model 浏览器对象模型，浏览器的很多行为都可以通过JavaScript控制，例如打开窗口、关闭窗口、把网页设为主页或添加到收藏夹等。这些操作实际上就是对BOM进行操作。BOM就是由一系列独立于内容而与浏览器窗口进行交互的对象构成，也就是说，浏览器上见到的一切都属于BOM。

BOM浏览器对象模型

window对象

（1）弹窗

alert弹窗

alert("你好啊，欢迎来到JS");

confirm弹窗

                        var choise = confirm("请选择是否进行以下操作");
			alert(choise);

点击确定时，flag值为true。点击取消时，flag值为false。

（2）定时操作

setTimeout和clearTimeout

到达指定的毫秒数后，执行function一次；返回值st,用来停止计时。

//方式1
			var mytime = setTimeout(function(){alert("你好啊")},1000);   //打开浏览器后会延迟1秒显示
			//clearTimeout(mytime);   使用时配合在某种条件下再进行取消

//方式2
			function fun(){
				alert("你好啊");
			}
			var mytime = setTimeout(fun,1000);   //打开浏览器后会延迟1秒显示
			//clearTimeout(mytime);   使用时配合在某种条件下再进行取消

//方式3
			function fun(){
				alert("你好啊");
			}
			var mytime = setTimeout("fun()",1000);   //打开浏览器后会延迟1秒显示
			//clearTimeout(mytime);   使用时配合在某种条件下再进行取消

setInterval和 clearInterval

每隔指定的毫秒数，执行指定的function一次和取消定时

格式和上面都一样，除了关键词有改变。所以用一个小的例子来演示：

/*
document.getElementById("hh") 表示通过html的id值，获取到标签。
innerHTML表示操作获得到的标签中的内容。
onclick="mystart()"  表示单击这个按钮时，调用mystart()函数。
*/
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			var st;
			function mystart(){
				st = setInterval(function(){
					var d = new Date();
					var str = d.toLocaleString();
					document.getElementById("hh").innerHTML = str;
				})
			}
			function mystop(){
				clearInterval(st);
			}
		</script>
	</head>
	<body>
		<input type="button" value="开始" onclick="mystart()" />
		<input type="button" value="结束" onclick="mystop()" />
		<h1 id = "hh"></h1>
	</body>
</html>

document.getElementById("hh") 表示通过html的id值，获取到标签。

innerHTML表示操作获得到的标签中的内容。

οnclick="mystart()" 表示单击这个按钮时，调用mystart()函数。

（3）窗体加载完成

页面加载完成后执行function

格式为：

window.οnlοad=function(){}

                        onload = function(){
				document.getElementById("hh").innerHTML = new Date().toLocaleString();
			}

History对象

history对象表示浏览器的浏览历史。

history.back() 后退一步

history.forward() 前进一步

history.go(number) number为整数时，表示前进。为负数时，表示后退。

//演示的话可以点击右边百度按钮，然后浏览两个窗口后利用浏览器的返回按钮然后再点击自定义按钮
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function myforward(){
				history.forward();
			}
			function myback(){
				history.back();
			}
			function goforward2(){
				history.go(2);
			}
			function goback2(){
				history.go(-2);
			}
		</script>
	</head>
	<body>
		<input type="button" value="前进" onclick="myforward()" />
		<input type="button" value="后退" onclick="myback()" />
		<input type="button" value="前进两步" onclick="goforward2()" />
		<input type="button" value="后退两步" onclick="goback2()" />
		<a href="https://www.baidu.com">百度</a>
	</body>
</html>

Location对象

使用JS制作链接效果

window.location.href=""

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function fun(){
				location.href = "https://blog.csdn.net/qq_39565202/category_9474027.html";
			}
		</script>
	</head>
	<body>
		<input type="button" name="" id="" value="跳转" onclick="fun()" />
	</body>
</html>

navigator对象

只读对象，包含有关浏览器的信息，这个只需了解。不用强行记忆里面所有属性。

                <script>
			var obj = navigator;
			for(key in obj){
				alert(key+"<<<>>>"+obj[key]);
			}
		</script>

screen对象

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

每个 Window 对象的 screen 属性都引用一个 Screen 对象。Screen 对象中存放着有关显示浏览器屏幕的信息。JavaScript 程序将利用这些信息来优化它们的输出，以达到用户的显示要求。例如，一个程序可以根据显示器的尺寸选择使用大图像还是使用小图像，它还可以根据显示器的颜色深度选择使用 16 位色还是使用 8 位色的图形。另外，JavaScript 程序还能根据有关屏幕尺寸的信息将新的浏览器窗口定位在屏幕中间。

availHeight	返回显示屏幕的高度 (除 Windows 任务栏之外)。
availWidth	返回显示屏幕的宽度 (除 Windows 任务栏之外)。
bufferDepth	设置或返回调色板的比特深度。
colorDepth	返回目标设备或缓冲器上的调色板的比特深度。
deviceXDPI	返回显示屏幕的每英寸水平点数。
deviceYDPI	返回显示屏幕的每英寸垂直点数。
fontSmoothingEnabled	返回用户是否在显示控制面板中启用了字体平滑。
height	返回显示屏幕的高度。
logicalXDPI	返回显示屏幕每英寸的水平方向的常规点数。
logicalYDPI	返回显示屏幕每英寸的垂直方向的常规点数。
pixelDepth	返回显示屏幕的颜色分辨率（比特每像素）。
updateInterval	设置或返回屏幕的刷新率。
width	返回显示器屏幕的宽度。

好吃的都给你呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
BOM浏览器对象模型

BOM Browser Object Model 浏览器对象模型，浏览器的很多行为都可以通过JavaScript控制，例如打开窗口、关闭窗口、把网页设为主页或添加到收藏夹等。这些操作实际上就是对BOM进行操作。BOM就是由一系列独立于内容而与浏览器窗口进行交互的对象构成，也就是说，浏览器上见到的一切都属于BOM。
复制链接

扫一扫