HTML之Javascript——BOM浏览器对象模型

最新推荐文章于 2022-11-17 12:01:32 发布

松鼠MaSaKi

最新推荐文章于 2022-11-17 12:01:32 发布

阅读量258

点赞数

分类专栏： JAVA Basics 文章标签： html BOM

本文链接：https://blog.csdn.net/qq_45337431/article/details/100043712

版权

JAVA Basics 专栏收录该内容

90 篇文章 2 订阅

订阅专栏

浏览器对象模型 (BOM)：(Browser Object Model)尚无正式标准。

一、window窗口操作

所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
甚至 HTML DOM 的 document 也是 window 对象的属性之一：比如以下代码等价。

window.document.getElementById("header");
document.getElementById("header");

1.1 window尺寸

有三种方法能够确定浏览器窗口的尺寸：

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：
- window.innerHeight - 浏览器窗口的内部高度(不包括滚动条、菜单栏、工具栏)
- window.innerWidth - 浏览器窗口的内部宽度(不包括滚动条、菜单栏、工具栏)
对于 Internet Explorer 8、7、6、5：
- document.documentElement.clientHeight
- document.documentElement.clientWidth
- document.body.clientHeigh
- document.body.clientWidth
实用的 JavaScript 方案（涵盖所有浏览器）：

var w=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
var h=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;

1.2 Window常用方法

window.open() - 打开新窗口
window.close() - 关闭当前窗口

<input type="button" value="打开窗口" onclick="openwin()" />
<input type="button" value="关闭窗口" onclick="closewin()" />
<script type="text/javascript">
	var mywindow;
	function openwin(){
		mywindow=window.open("https://www.baidu.com");
	}
	function closewin(){
		mywindow.close();
	}
</script>

二、Screen操作

可用宽度：screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如窗口任务栏。

document.write("可用宽度: " + screen.availWidth);

- 可用高度：screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去界面特性，比如窗口任务栏。

document.write("可用高度: " + screen.availHeight);

要区别开屏幕宽度和高度

<body>
	<input type="button" value="显示屏幕的宽度和高度" onclick="click6()" />
	<input type="button" value="显示屏幕可用宽度和高度" onclick="click7()" />
</body>
<script type="text/javascript">
	function click6(){
		document.write("屏幕宽度："+screen.width);
		document.write("屏幕高度："+screen.height);
	}
	function click7(){
		document.write("屏幕可用宽度："+screen.availWidth);
		document.write("屏幕可用高度："+screen.availHeight);
	}
</script>

输出结果为：
屏幕宽度：1536 屏幕高度：864
屏幕可用宽度：1536 屏幕可用高度：824

三、Location操作

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。window.location 对象在编写时可不使用 window 这个前缀。

一些实例：

location.href 属性返回当前页面的 URL。
location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口（80 或 443）
location.protocol 返回所使用的 web 协议（http:// 或 https://）

<body>
	<input type="button" value="显示location对象" onclick="click7()" />
</body>
<script type="text/javascript">
	function click7(){
		var href=window.location.href;
		var hostName=window.location.hostname;
		var pathName=window.location.pathname;
		var port=window.location.port;
		var pro=window.location.protocol;
		
		console.log(href);	//属性返回当前页面的 URL
		console.log(hostName);	//返回 web 主机的域名
		console.log(pathName);	//返回当前页面的路径和文件名
		console.log(port);	//返回 web 主机的端口
		console.log(pro);	//返回所使用的 web 协议（http:// 或 https://）
	}
</script>

输出结果：
在这里插入图片描述

四、History操作

window.history 对象包含浏览器的历史，这个历史指的是页面的前进和后退。
window.history 对象在编写时可不使用 window 这个前缀。
为了保护用户隐私，对 JavaScript 访问该对象的方法做出了限制。

history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击按钮向前相同

<!--bbb页面-->
<html>
	<head>
		<meta charset="UTF-8">
		<title>bbb</title>
	</head>
	<body>
		<h2>bbb.html</h2>
	</body>
</html>

<!--aaa页面-->
<html>
	<head>
		<meta charset="UTF-8">
		<title>aaa</title>
	</head>
	<body>
		<h2>aaa页面</h2>
		<!--去bbb页面-->
		<a href="bbb.html">去bbb.html</a>
		<input type="button" value="后退" onclick="click1()" />
		<script type="text/javascript">
			function click1(){
				//返回首页
				window.history.back();
			}		
		</script>
	</body>
</html>

<!--首页-->
<html>
	<head>
		<meta charset="UTF-8">
		<title>history对象</title>
	</head>
	<body>
		<input type="button" value="显示历史记录个数" onclick="click1()" />
		<input type="button" value="前进1个" onclick="click2()" />
		<input type="button" value="前进2个" onclick="click3()" />
		<a href="aaa.html">去aaa.html</a>
		<script type="text/javascript">
			function click1(){
				//记录前进个数，首页为1，当点击aaa进入页面的时候，就是2，再进入bbb就是3　
				var len=window.history.length;
				alert(len);
			}
			function click2(){
				//向前前进1个页面，即aaa页面，但是必须先前进到aaa然后退后，才能激活这个按钮
				window.history.forward();
			}
			function click3(){
				//向前前进2个页面，即bbb页面，但是必须先前进到bbb然后退后，才能激活这个按钮
				window.history.go(2);
			}
		</script>		
	</body>
</html>

五、Date对象

<head>
	<meta charset="utf-8">
	<title>Date对象</title>
</head>
<body>
	<script type="text/javascript">
		var now=new Date();
		console.log(now.toUTCString());	//Fri, 23 Aug 2019 11:47:21 GMT
		console.log(now.toLocaleString()); //2019/8/23 下午7:47:21
		console.log(now.getTime()); //1566560841517
		console.log(now.getFullYear()); //2019
		console.log(now.getMonth()+1); //8
		console.log(now.getDate()); //23
		console.log(now.getHours()); //19
		console.log(now.getMinutes()); //47
		console.log(now.getSeconds()); //21
		
		//修改时间
		now.setDate(24); //日期为24号
		console.log(now.getFullYear()); //2019
		console.log(now.getMonth()+1); //8
		console.log(now.getDate()); //24
	</script>
</body>

五、setTimeout() 延迟执行函数

延迟执行指定的函数，只能执行一次

setTimeout("javascript 函数", 毫秒数);

<html>
	<head>
		<meta charset="utf-8">
		<title>setTimeOut的使用</title>
	</head>
	<body>
		<div id="div1"></div>
		<script type="text/javascript">
			var num=1;
			function show(){
				var div1=document.getElementById("div1");
				div1.innerHTML="javaScript延迟指向函数"+num;
				num++;		
			}
			setTimeout("show()",1000);
		</script>
	</body>
</html>

六、setInterval() 周期执行函数

间隔指定的毫秒数不停地执行指定的代码。

setInterval(function(){alert("Hello")},3000);
setInterval("javascript 函数", 毫秒数);

案例：动态显示时间，点击暂停，停止计时，点击开始，开始计时

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>动态显示时间</title>
	</head>
	<body>
		<div id="clock"></div>
		<input id="input1" type="button" value="暂停" onclick="stopTime()"/> 
		<input id="input2" type="button" value="开始" onclick="startTime()" disabled="disabled"/>
		<script type="text/javascript">
			//获取标签元素,进行操作
			var clock=document.getElementById("clock");
			var input1=document.getElementById("input1");
			var input2=document.getElementById("input2");
			function showTime(){
				//创建时间并获取字段
				var d=new Date();
				var year=d.getFullYear();
				var month=d.getMonth()+1;
				var day=d.getDate();
				var h=d.getHours();
				var m=d.getMinutes();
				var s=d.getSeconds();
				//修改id为"clock"的div内容
				clock.innerHTML="<h2>"+year+"-"+month+"-"+day+" "+h+":"+m+":"+s+"</h2>";
			}
			//开始动态计时
			var tid=setInterval("showTime()",1000);
			//停止动态计时
			function stopTime(){
				clearInterval(tid); //清除周期线程
				input2.disabled=false; //注意这里不能加双引号
				input1.disabled=true; //当点击暂停,暂停按钮disabled为true,表示灰色不可按
			}
			function startTime(){
				tid=setInterval("showTime()",1000); //重新创建周期线程
				input1.disabled=false;
				input2.disabled=true;
			}
		</script>
	</body>
</html>

松鼠MaSaKi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML之Javascript——BOM浏览器对象模型

浏览器对象模型 (BOM)：(Browser Object Model)尚无正式标准。一、window窗口操作所有浏览器都支持 window 对象。它表示浏览器窗口。所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。全局变量是 window 对象的属性。全局函数是 window 对象的方法。甚至 HTML DOM 的 document 也是 win...
复制链接

扫一扫

专栏目录