JavaScript(BOM对象)

最新推荐文章于 2022-08-09 17:34:40 发布
最新推荐文章于 2022-08-09 17:34:40 发布
阅读量280 收藏 1
点赞数
分类专栏： JavaScript 文章标签： javascript html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/WildKingxue/article/details/120186134
版权

一.什么是BOM对象

BOM(Browser Object Model) 是指浏览器对象模型，是用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。

 二.window属性

有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。

1.第一种

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浏览器窗口的尺寸</title>
		<script type="text/javascript">
			window.onload=function(){
				//得到浏览器窗口的内部宽高
				var w=window.innerWidth;
				var h=window.innerHeight;
				alert(w+"*"+h);
			}
		</script>
	</head>
	<body>
	</body>
</html>

 谷歌的浏览器：

 

 不适用于低版本的IE浏览器。

 2.第二种

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浏览器窗口的尺寸</title>
		<script type="text/javascript">
			window.onload=function(){
				//得到浏览器窗口的内部宽高
				var w=document.documentElement.clientWidth;
				var h=document.documentElement.clientHeight;
				alert(w+"*"+h);//适用所有浏览器 IE也可用
			}
		</script>
	</head>
	<body>
	</body>
</html>

谷歌浏览器：

IE浏览器：

 3.第三种

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浏览器窗口的尺寸</title>
		<script type="text/javascript">
			window.onload=function(){
				//得到浏览器窗口已用的内部宽高
				var w=document.body.clientWidth;
				var h=document.body.clientHeight;
				alert(w+"*"+h);//已用的浏览器窗口宽高
			}
		</script>
	</head>
	<body>
	</body>
</html>

谷歌浏览器：

 显示的是已用的浏览器窗口大小。

三.window方法

1.open()

open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口

格式:window.open(URL,name,features,replace)

URL一个可选的字符串，声明了要在新窗口中显示的文档的 URL。如果省略了这个参数，或者它的值是空字符串，那么新窗口就不会显示任何文档。
name一个可选的字符串，该字符串是一个由逗号分隔的特征列表，其中包括数字、字母和下划线，该字符声明了新窗口的名称。这个名称可以用作标记 <a> 和 <form> 的属性 target 的值。如果该参数指定了一个已经存在的窗口，那么 open() 方法就不再创建一个新窗口，而只是返回对指定窗口的引用。在这种情况下，features 将被忽略。
features一个可选的字符串，声明了新窗口要显示的标准浏览器的特征。如果省略该参数，新窗口将具有所有标准特征。
replace

一个可选的布尔值。规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。支持下面的值：

true - URL 替换浏览历史中的当前条目。

false - URL 在浏览历史中创建新的条目。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>打开窗口的控制方法</title>
		<script type="text/javascript">
			function shao(){
				//也可以打开网络路径
				window.open("https://www.taobao.com/","淘宝","while=600,height=600",true);
			}
		</script>
	</head>
	<body>
		<input type="button" value="打开" onclick="shao()"/>
	</body>
</html>

2.close()

close() 方法用于关闭浏览器窗口。

方法 close() 将关闭有 window 指定的顶层浏览器窗口。某个窗口可以通过调用 self.close() 或只调用 close() 来关闭其自身。

只有通过 JavaScript 代码打开的窗口才能够由 JavaScript 代码关闭。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>打开关闭窗口的控制方法</title>
		<script type="text/javascript">
			function shao(){
				//也可以打开网络路径
				window.open("https://www.taobao.com/",);
			}
			function hao(){
				//关闭网页页面，只关闭当前的，不关闭打开的
				window.close();
			}
		</script>
	</head>
	<body>
		<input type="button" value="打开" onclick="shao()"/>
		<input type="button" value="关闭" onclick="hao()"/>
	</body>
</html>

3.警告框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>警告框</title>
		<script type="text/javascript">
			window.onload=function(){
				//window可省略
				//window.alert("你好啊！");
				alert("你好啊！");
			}
		</script>
	</head>
	<body>
	</body>
</html>

  

4.确认框

当你点击 "确认", 确认框返回 true， 如果点击 "取消", 确认框返回 false。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>确认框</title>
		<script type="text/javascript">
			var src1 = confirm("给你一个惊喜，需要打开吗？");
			if(src1){
				alert("l love you");
				var src2 = confirm("你会接受吗？");
				if(src2){
					alert("我太开心了！");
				}else{
					alert("对不起，打扰到你了");
				}
			}else{
				window.close();
			}
		</script>
	</head>
	<body>
	</body>
</html>

5.提示框

如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。

参数1---提示信息

参数2---提示框的默认值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>提示框</title>
		<script type="text/javascript">
			var wen=window.prompt("我喜欢你，你喜欢我吗？");
			if(wen!=null){
				alert("我知道结果了！");
			}else{
				window.close();
			}
		</script>
	</head>
	<body>
	</body>
</html>

四. Window子对象

1.window Screen--屏幕

window.screen 对象包含有关用户屏幕的信息。 

  1. 总宽度和总高度  --- screen.width   /  screen.height
  2. 可用宽度和可用高度----screen.availWidth  / screen.availHeight
  3. 色彩深度----screen.colorDepth
  4. 色彩分辨率----screen.pixelDepth

<1.>总宽高

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>屏幕大小</title>
		<script type="text/javascript">
			window.onload=function(){
				//屏幕的宽高
				var w=window.screen.width;
				var h=window.screen.height;
				alert(w+"*"+h);
			}
		</script>
	</head>
	<body>
	</body>
</html>

 

<2.>可用宽高 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>屏幕可用大小</title>
		<script type="text/javascript">
			window.onload=function(){
				//屏幕可用的宽高
				var w=window.screen.availWidth;
				var h=window.screen.availHeight;
				alert(w+"*"+h);
			}
		</script>
	</head>
	<body>
	</body>
</html>

 <3.>色彩深度和分辨率

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>色彩深度和分辨率</title>
		<script type="text/javascript">
		//色彩的深度和分辨率
			window.onload=function(){
				//得到色彩深度
				var x=window.screen.colorDepth;
				//得到色彩分辨率
				var y=window.screen.pixelDepth;
				alert("色彩深度为"+x+",色彩分辨率为"+y);
			}
		</script>
	</head>
	<body>
	</body>
</html>

 2.window Location---页面的地址 (URL)

<1>location.href 属性返回当前页面的 URL。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>得到路径</title>
		<script type="text/javascript">
			function shao(){
				//得到这个网页的路径
				var a=window.location.href;
				alert(a);//http://127.0.0.1:8848/20210908JavaScript/6-1.html
			}
		</script>
	</head>
	<body>
		<input type="button" value="得到网页的路径" onclick="shao()"/>
	</body>
</html>

<2>location.search 属性是一个可读可写的字符串，可设置或返回当前 URL 的查询部分（问号 ? 之后的部分）。

登录例字：

当前页面代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录</title>
		<script type="text/javascript">
		//点击事件
			function shao(){
				//得到文本框内容
				var src1=document.getElementById("name");
				var Text=src1.value;
				//得到密码框内容
				var src2=document.getElementById("pass");
				var Password=src2.value;
				//判断文本框，密码框是否为设定的数值
				if(Text=="xiaoshao"&&Password=="12345678"){
					//判断为正确时，进入cc.html中显示***登录成功
					//window.location.href="cc.html";//可以登录
					window.location.href="cc.html?Text="+Text+"@Password="+Password;
				}else{
					//判断为错误时
					alert("用户名或密码错误！");
					src1.value="";
					src2.value="";
				}
			}
		</script>
	</head>
	<body>
		<input id="name" type="text" /><br>
		<input id="pass" type="password" /><br>
		<input type="button" value="登陆" onclick="shao();"/>
	</body>
</html>

登录后的页面：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录成功</title>
		<script type="text/javascript">
			window.onload=function(){
				var a=window.location.href;
				//alert(a);// http://127.0.0.1:8848/20210908JavaScript/cc.html?Text=xiaoshao@Password=12345678
				//alert(a.lastIndexOf("?"));//?的最后一次位置
				//隔着?拆分
				//alert(a.substring((a.lastIndexOf("?")+1),a.length));//Text=xiaoshao@Password=12345678
				var src=a.substring((a.lastIndexOf("?")+1),a.length);
				//使用split拆分成数组
				var src1=src.split("@");
				//alert(src1);//数组：Text=xiaoshao,Password=12345678
				//得到名字
				var src2=src1[0].substring((src1[0].lastIndexOf("=")+1),src1[0].length);
				//alert(src2);//xiaoshao
				//得到密码
				var src3=src1[1].substring((src1[1].lastIndexOf("=")+1),src1[1].length);
				//alert(src3);//12345678
				var x=document.getElementById("id1");
				x.innerText=src2+"登录成功，密码为"+src3;
			}
		</script>
	</head>
	<body>
		<h1 id="id1">登录成功</h1>
	</body>
</html>

 3.window History---历史对象

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

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

第一个页面代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>前进</title>
		<script type="text/javascript">
			function shao(){
				//点击按钮进入下一个页面
				window.history.forward()
			}
		</script>
	</head>
	<body>
		<a href="7-2.html">7-2.html</a>
		<input type="button"value="下一页" onclick="shao()"/>
	</body>
</html>

第二个页面的代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>前进后退</title>
		<script type="text/javascript">
			function king(){
				//点击按钮进入上一个页面
				window.history.back()
			}
			function shao(){
				//点击按钮进入下一个页面
				window.history.forward()
			}
		</script>
	</head>
	<body>
		<a href="7-3.html">7-3.html</a>
		<input type="button"value="上一页" onclick="king()"/>
		<input type="button"value="下一页" onclick="shao()"/>
	</body>
</html>

第三个页面的代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>后退</title>
		<script type="text/javascript">
			function king(){
				//点击按钮进入上一个页面
				window.history.back()
			}
		</script>
	</head>
	<body>
		<input type="button"value="上一页" onclick="king()"/>
	</body>
</html>

显示结果：

 注意:前进history.forward()和后退history.back()在同一个窗口中的页面才有效。

 4.window Navigator--浏览器的信息

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浏览器的信息</title>
		<script>
			document.write("<h1>浏览器代号:" + window.navigator.appCodeName + "</h1>");
			document.write("<h1>浏览器名称:" + window.navigator.appName + "</h1>");
			document.write("<h1>浏览器版本:" + window.navigator.appVersion + "</h1>");
			document.write("<h1>启用Cookies:" + window.navigator.cookieEnabled + "</h1>");
			document.write("<h1>硬件平台:" + window.navigator.platform + "</h1>");
			document.write("<h1>用户代理:" + window.navigator.userAgent + "</h1>");
			document.write("<h1>用户代理语言:" + window.navigator.systemLanguage + "</h1>");
		</script>
	</head>
	<body>
	</body>
</html>

五. JavaScript 计时事件

1.setInterval() 

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

2.clearInterval()

暂停指定的毫秒数后执行指定的代码

一组结合：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计数器</title>
		<script type="text/javascript">
		function getDate(){
			var date1 = new Date();
			//date1.setHours("00");
			var hours = date1.getHours();
			//date1.setMinutes("00");
			var minutes = date1.getMinutes();
			//date1.setSeconds("00");
			var seconds = date1.getSeconds();
			var time=hours+":"+minutes+":"+seconds;
			document.getElementById("h4").innerText=time;
			}
			var res;
			//开始
			function start(){
				res=setInterval(function(){getDate()},1000);
			}
			//停止
			function end(){
				clearInterval(res);
			}
		</script>
	</head>
	<body>
		<input type="button" value="开始" onclick="start()"/>
		<input type="button" value="停止" onclick="end()"/>
		<h4 id="h4"></h4>
	</body>
</html>

 3.setTimeout() 方法

暂停指定的毫秒数后执行指定的代码

参数1--指定运行的代码

参数2--指定的毫秒数

只执行一次

4.clearTimeout()方法

用于停止执行setTimeout()方法的函数代码。

当执行一次毫秒数太长的时候，有突发/紧急事情的时候，可以使用clearTimeout()方法来停止setTimeout()方法

JavaScript BOM 对象详解
xycxycooo的博客
07-16 873
在 JavaScript 编程中，BOM（Browser Object Model）是指浏览器对象模型，它提供了一组用于与浏览器窗口进行交互的对象。BOM 对象允许开发者控制浏览器的行为和获取浏览器的信息。本文将详细介绍 JavaScript 中的 BOM 对象，并通过丰富的示例帮助你更好地理解。通过本文的详细讲解，相信你已经对 JavaScript 中的 BOM 对象有了全面的了解。在实际编程中，合理使用 BOM 对象可以提高代码的效率和可读性。对象是 BOM 的核心对象，代表浏览器窗口或标签页。
JavaScript-BOM对象
L990614的博客
09-14 237
BOM对象 一 、浏览器对象模型（BOM） 1、BOM对象的概念 BOM(Browser Object Model) 是指浏览器对象模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。 2、BOM对象的核心 BOM的核心对象是window(窗口对象); window是浏览器的顶级对象，当调用window下的属性和方法时，可以省略window 注意：window下一个特殊的属性
js的BOM对象完全解析
01-25 155
BOM即浏览器对象模型，它包括如下一些对象！ （一）screen对象，Screen 对象中存放着有关显示浏览器屏幕的信息。 常见的属性有： availHeight:返回显示屏幕的高度 availWidth:返回显示屏幕的宽度 colorDepth:返回目标设备或缓冲器上的调色板的比特深度。 height:返回屏幕区域的实际高度 width:返回屏幕区域的实际宽度 （...
JS BOM对象
hbl020305的博客
08-09 715
JS BOM对象
js中的BOM对象
weixin_43489515的博客
03-28 340
一、介绍 BOM（Browser ObjectModel）游览器对象模型 是window对象的一个属性，window对象是全局对象，所有表达式都在当前环境中，window对象就是在游览器上打开的一个窗口 二、系统对话框 alert（） confirm（） 点击确认返回True 点击取消返回False prompt（） 参数有两个，第一个为提示的内容，第二个为输入框的内容 点击确认返回...
JavaScript BOM操作 window对象的子级对象 示例代码
最新发布
07-01
JavaScript BOM操作 window对象的子级对象 示例代码JavaScript BOM操作 window对象的子级对象 示例代码JavaScript BOM操作 window对象的子级对象 示例代码JavaScript BOM操作 window对象的子级对象 示例代码...
JavaScript bom操作 window对象的方法 示例代码
06-27
JavaScript bom操作 window对象的方法 示例代码JavaScript bom操作 window对象的方法 示例代码JavaScript bom操作 window对象的方法 示例代码JavaScript bom操作 window对象的方法 示例代码JavaScript bom操作 ...
JavaScript BOM对象详解：跨浏览器差异与API概览
本文档主要探讨了JavaScript中的Browser Object Model (BOM)，即浏览器对象模型，这是一个与浏览器环境交互的关键部分，用于获取和操作网页的各种属性和功能。BOM关注的是浏览器窗口（window）及其相关对象，这些...
javascript操作BOM对象.docx
07-05
本文档主要介绍了 JavaScript 操作 BOM（ Browser Object Model）对象的相关知识点，包括 window 对象、history 对象、location 对象、Document 对象、Math 对象和 Date 对象等。 window 对象 window 对象是 BOM ...
JS-BOM对象
weixin_65287845的博客
04-08 340
写文不易，还望大家多多支持
js操作BOM对象
bajiva的博客
04-16 400
浏览器对象模型（BOM）是JavaScript的组成之一，它提供了独立于内容与浏览器窗口进行交互的对象，使用浏览器对象模型可以实现与HTML的交互。BOM通常可实现如下功能：1.弹出新的浏览器窗口。2.移动、关闭浏览器窗口及调整窗口的大小。3.在浏览器窗口中实现页面的前进、后退功能。windows对象常用的属性名称说明   history有关客户访问过的URL信息location有关当前URL的信...
JavaScript中的bom对象
qq_41586079的博客
10-15 243
  首先，bom是 broswer object model 的缩写，意思是浏览器对象模型； 下面介绍bom里的几个对象。 1.navigator：获取客户机的信息（浏览器的信息） 2.screen：获取屏幕的信息   下面演示一下navigator里的一个appName属性，和screen 的height属性 &lt;!DOCTYPE html&gt; &lt;html lang...
JavaScript中BOM对象
aa472546593的博客
06-18 274
BOM是Browser Object Model的缩写，简称浏览器对象模型。BOM提供了独立于内容而与浏览器窗口进行交互的对象由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是windowBOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C（WHATWG,WebHypertextAppl...
js的BOM对象
weixin_43893437的博客
03-29 180
BOM对象有 screen location navigator history 1.screen有width height availHeight availWidth 2.location console.log(window.location); //window.location.href="http://www.baidu.com" // 可以切换网址 //window...
js的Bom对象
qq_36594703的博客
08-09 365
js的Bom对象 bom:浏览器对象模型 有哪些对象？ navigator :获取客户机信息（浏览器信息） navigator.appName:显示浏览器名称 screen ：屏幕的信息 location ：请求url地址 href属性：1.获取请求的url地址2.设置url地址 history ：请求的url历史 到访问的上一个页面history.back();
JavaScript(JS)的BOM对象(JS的Browser对象)----什么是BOM对象?
No8g攻城狮的博客
04-02 1614
1. 概念： Browser Object Model 浏览器对象模型：将浏览器的各个组成部分封装成对象。感觉不懂的可以看下图所示： 2. 组成： * Window：窗口对象 * Navigator：浏览器对象（不常用） * Screen：显示器屏幕对象（不常用） * History：历史记录对象 * Location：地址栏对象 3. Win...
JavaScript 中的BOM对象
小罗的博客
08-05 1297
第一：包含大量的属性，localStorage、console、location、history、screenX、scrollX等等(大概60+个属性)在目前的开发中，JSON是一种非常重要的数据格式，它并不是编程语言，而是一种可以在服务器和客户端之间传输的数据格式。XML：在早期的网格传输中主要是使用XML来进行数据交换的，但是这种格式在解析，传输等各方面都很少在被使用了。对象值：由key、value组成、key是字符串类型，并且必须添加双引号，值可以是简单值、对象值、数组值；...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值