【JavaScript】操作BOM

最新推荐文章于 2024-08-19 12:41:31 发布
最新推荐文章于 2024-08-19 12:41:31 发布
阅读量338 收藏 12
点赞数 20
分类专栏： 前端开发者成长之路 文章标签： javascript safari firefox
Java Fans
本文链接：https://blog.csdn.net/hh867308122/article/details/127782731
版权

文章目录


在这里插入图片描述

什么是BOM

BOM：Browser Object Model（浏览器对象模型），提供了独立于内容与浏览器窗口进行交互的对象。由于现代浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性，因此常被认为是 BOM 的方法和属性。

常用浏览器对象

对象名称说明
window窗口对象, 可以用来控制当前窗口, 或打开新的窗口
screen屏幕对象, 获取屏幕相关信息
navigator浏览器对象, 通过这个对象可以判定用户所使用的浏览器
history历史对象, 可以用来前进或后退一个页面
location地址对象, 可以用来获取当前URL的信息
JavaScript计时事件在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行
localStorage SessionStorage存储对象, 可以用来存储数据, 和cookie相似, 区别是它是为了更大容量存储设计的, 在使用上也更加方便

Window 对象

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.clientHeight
  • document.body.clientWidth

案例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Window 尺寸</title>
</head>
<body>

<p id="demo"></p>
<script>
var w=window.innerWidth
      || document.documentElement.clientWidth
      || document.body.clientWidth;
var h=window.innerHeight
      || document.documentElement.clientHeight
      || document.body.clientHeight;
x=document.getElementById("demo");
x.innerHTML="浏览器window宽度: " + w + ", 高度: " + h + "。"
</script>

</body>
</html>
其他方法

window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸

Screen对象

  • screen.availWidth - 可用的屏幕宽度
  • screen.availHeight - 可用的屏幕高度

以像素计，减去界面特性，比如窗口任务栏。

<script>
	document.write("可用宽度: " + screen.availWidth);
	document.write("可用高度: " + screen.availHeight);
</script>

Navigator对象

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Navigator对象</title>
	</head>
	<body>
		<div id="example"></div>
		<script>
			txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>";
			txt += "<p>浏览器名称: " + navigator.appName + "</p>";
			txt += "<p>浏览器版本: " + navigator.appVersion + "</p>";
			txt += "<p>启用Cookies: " + navigator.cookieEnabled + "</p>";
			txt += "<p>硬件平台: " + navigator.platform + "</p>";
			txt += "<p>用户代理: " + navigator.userAgent + "</p>";
			txt += "<p>用户代理语言: " + navigator.language + "</p>";
			document.getElementById("example").innerHTML = txt;
		</script>

	</body>
</html>

运行结果：

在这里插入图片描述
警告!!!
来自 navigator 对象的信息具有误导性，不应该被用于检测浏览器版本，这是因为：

navigator 数据可被浏览器使用者更改
一些浏览器对测试站点会识别错误
浏览器无法报告晚于浏览器发布的新操作系统
浏览器检测
由于 navigator 可误导浏览器检测，使用对象检测可用来嗅探不同的浏览器。

由于不同的浏览器支持不同的对象，您可以使用对象来检测浏览器。例如，由于只有 Opera 支持属性 “window.opera”，您可以据此识别出 Opera。

例子：if (window.opera) {…some action…}

History对象

常用方法：

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

history.back()实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<head>
			<script>
				function goBack() {
					window.history.back()
				}
			</script>
		</head>
	<body>
		<input type="button" value="Back" onclick="goBack()">
	</body>
</html>

history.forward()实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script>
			function goForward() {
				window.history.forward()
			}
		</script>
	</head>
	<body>
		<input type="button" value="Forward" onclick="goForward()">
	</body>
</html>

Location对象

一些实例说明
location.hostname返回 web 主机的域名
location.pathname返回当前页面的路径和文件名
location.port返回 web 主机的端口 （80 或 443）
location.protocol返回所使用的 web 协议（http: 或 https:）

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>location对象</title>
	</head>
	<body>
		<script>
			console.log(location.port);
			console.log(location.protocol);
			console.log(location.hostname);
		</script>
	</body>
</html>

运行结果：
在这里插入图片描述

JavaScript 弹窗

可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。
在这里插入图片描述

警告框

警告框经常用于确保用户可以得到某些信息。

当警告框出现后，用户需要点击确定按钮才能继续进行操作。

语法：
window.alert(“sometext”);
window.alert() 方法可以不带上window对象，直接使用alert()方法。

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script>
			function myFunction() {
				alert("你好，我是一个警告框！");
			}
		</script>
	</head>
	<body>
		<input type="button" onclick="myFunction()" value="显示警告框" />
	</body>
</html>

运行效果：

在这里插入图片描述

确认框

确认框通常用于验证是否接受用户操作。

当确认框弹出时，用户可以点击 “确认” 或者 “取消” 来确定用户操作。

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

语法：
window.confirm(“sometext”);
window.confirm() 方法可以不带上window对象，直接使用confirm()方法。

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script>
			function myFunction() {
				var x;
				var r = confirm("按下按钮!");
				if (r == true) {
					x = "你按下了\"确定\"按钮!";
				} else {
					x = "你按下了\"取消\"按钮!";
				}
				document.getElementById("demo").innerHTML = x;
			}
		</script>
	</head>
	<body>
		<p>点击按钮，显示确认框。</p>
		<button onclick="myFunction()">点我</button>
	</body>
</html>

运行效果：

在这里插入图片描述

提示框

提示框经常用于提示用户在进入页面前输入某个值。

当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。

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

语法：
window.prompt(“sometext”,“defaultvalue”);
window.prompt() 方法可以不带上window对象，直接使用prompt()方法。

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script>
			function myFunction() {
				var x;
				var person = prompt("请输入你的名字", "Harry Potter");
				if (person != null && person != "") {
					x = "你好 " + person + "! 今天感觉如何?";
					document.getElementById("demo").innerHTML = x;
				}
			}
		</script>
	</head>
	<body>
		<p>点击按钮查看输入的对话框。</p>
		<button onclick="myFunction()">点我</button>
		<p id="demo"></p>
	</body>
</html>

运行效果：

在这里插入图片描述

投票传送门

Java Fans
关注
专栏目录
JavaScript BOM操作
brokyz
06-30 718
BOM （Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。BOM 缺乏标准，JavaScript 语法的标准化组织是 ECMA，DOM 的标准化组织是 W3C，BOM 最初是 Netspace 浏览器标准的一部分。window 对象是浏览器的顶级对象，它具有双重角色。在调用的时候可以省略 window，前面学习的对话框都属于 window 对象方法，如
第二章：JavaScript操作BOM对象
NoKris的博客
08-20 144
​ BOM：浏览器对象模型（Browser Object Model） ​ BOM提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。​ BOM是分为三大部分的，分别是：history，document，location。我们也会根据这三个部分，一一讲述。​ BOM可实现功能​ 常用属性​ 语法：示例：​ 常用方法 ​ confirm()方法:语法：示例： tip:confirm()与alert ()、 prompt()区别​ open()方法:​ open方法在一些支持上已经步入之前了，现在的一
JavaScript操作BOM
weixin_30894389的博客
06-03 110
window对象的属性： history： 方法： back() 加载 history 对象列表中的前一个URL forward() 加载 history 对象列表中的下一个URL go() 加载 history 对象列表中的某个具体URL location: 属性: host 设置或返回主机名和当前URL的端口号 hostname 设置或返回当前URL...
JavaScript 之 BOM 操作
最新发布
m0_73759720的博客
08-19 930
BOM 是指浏览器对象模型,浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM操作是指与浏览器窗口进行互动的操作。
JavaScript 弹窗
weixin_30472035的博客
06-01 115
可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。 警告框 警告框经常用于确保用户可以得到某些信息。 当警告框出现后，用户需要点击确定按钮才能继续进行操作。 语法 window.alert("sometext"); window.alert()方法可以不带上window对象，直接使用alert()方法。 实例 <!DOCTYPE htm...
JavaScript学习之路---JavaScript操作BOM
小牛叹气生活不易的博客
08-18 340
JavaScript操作BOM
JavaScript之BOM操作一
学习记录
03-22 329
1、BOM概述 1.1 什么是BOM BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window BOM由一系列相关的对象构成，并且每个对象都提供了很多方法和属性 BOM缺乏标准，Javascript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分 DOM BOM 文档对象模型 浏览器对象模型 DOM就是把【文档】当做一个【对象】来看待 把【浏览器】当做
javascript操作BOM对象.docx
07-05
JavaScript 操作 BOM 对象 本文档主要介绍了 JavaScript 操作 BOM（ Browser Object Model）对象的相关知识点，包括 window 对象、history 对象、location 对象、Document 对象、Math 对象和 Date 对象等。 window...
第二章JavaScript操作BOM对象4
08-08
在本章"第二章JavaScript操作BOM对象4"中，我们将深入探讨JavaScript在网页中的引用方式、基本数据类型以及数组的定义与访问。这将帮助我们更好地理解和运用JavaScript这一强大的客户端脚本语言。 首先，让我们来看...
Javascript操作BOM和DOM
12-30
JavaScript是一种广泛应用于网页和网络应用的脚本语言，主要负责客户端...了解并熟练掌握JavaScript操作BOM和DOM，是成为高效前端开发者的基础。通过这些技术，开发者能够创建出丰富、动态且具有高度交互性的网页应用。
JavaScript操作BOM对象.md
02-17
笔记来源于本人自己学习过程中的总结，分享到CSDN也是第一次传到网上跟大家分享，希望我的这档笔记能给大家带来帮助，和能够给更多的学习过程中的准程序员们提供便利，希望大家多多支持，谢谢
JavaScript BOM操作(超详细)
wu_ry的博客
03-13 1430
由于window对象是全局对象，所以在使用window对象的属性和方法时，window可以省略不写.例如，之前直接使用的alert()方法、confirm()方法及prompt()方法的用法、本节主要讲解open()方法和close()方法，JavaScript定时函数会在后面中详细介绍。设置间谒调用的方法是setInterval(),接收的参数与setTimeout()方法相同，为要执行的代码和每次执行之前需要等待的毫秒数。可以通过数组的名称和下标直接访问数组的元素，访问数组的表示形式，数组名[下标]。
js操作BOM
田兴的博客
10-24 2549
什么是Bom? Bom是浏览器对象。它提供与浏览器的交互5大属性。 有哪些常用的Bom属性呢？ navigator（浏览器对象） 1. 如何检测浏览器的类型 (ua的问题)？ //如何检测是否为Chrome浏览器 var ua = navigator.userAgent; console.log(ua); var isChrome =ua.indexOf('Chrome'); console.log(isChrome); // true为是，false为不是 screen（屏幕对象） screen.w
JavaScript中的BOM操作
虎康的博客
09-24 257
文章目录一、JavaScript二、BOM 对象三、window对象四、location对象五、navigator对象六、实战 一、JavaScript JavaSript = ECMAScript + DOM + BOM DOM : 文档对象模型(document对象) BOM : 浏览器对象模型 二、BOM 对象 window对象：全局对象 screen对象包含有关用户屏幕的信息 location对象用于获得当前页面的地址（URL），并把浏览器重定向到新的页面 history对象包含浏览器的历史
Javascript中BOM操作
weixin_60488295的博客
11-25 246
BOM BOM: Browser Object Model 浏览器对象模型 js提供给我们用来操作浏览器的信息的接口 iframes location history document navigator .... BOM核心: window 可以直接使用变量名或者函数名就能出线效果的(全局变量、全局函数), 所属对象都是window 对话框 警告框: alert() 带有确定取消按钮的警告框: confirm('提示内容') 带有输入框的对话框: pro
JavaScript中BOM操作【通俗易懂】
sjs52406的博客
01-02 1816
本篇文章主要在于了解JavaScript中BOM(即浏览器对象模型),以及对它的简单使用
js基础（BOM对象）
weixin_30315435的博客
05-12 161
　　　　　　 /* * BOM * - 浏览器对象模型 * - BOM可以使我们通过JS来操作浏览器 * - 在BOM中为我们提供了一组对象，用来完成对浏览器的操作 * - BOM对象 * ...
JavaScript操作BOM：window对象详解
"JavaScript操作BOM对象" 在JavaScript中，BOM（Browser Object Model）即浏览器对象模型，它定义了浏览器窗口如何与JavaScript交互。本文主要关注的是如何利用JavaScript操作BOM中的核心对象——window对象，以及...
评论 15
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Java Fans

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值