JavaScript 的 BOM 对象（window 对象、History对象、Location 对象、Navigator 和 screen 对象）

最新推荐文章于 2024-07-16 19:07:40 发布

ONESTAR博客

最新推荐文章于 2024-07-16 19:07:40 发布

阅读量2.2k

点赞数 1

分类专栏： JavaWeb 文章标签： JavaScript 的 BOM 对象 window 对象 History对象 Location 对象 Navigator 和 screen 对象

本文链接：https://blog.csdn.net/One_L_Star/article/details/99705791

版权

JavaWeb 专栏收录该内容

33 篇文章 2 订阅

订阅专栏

五、Navigator 和 screen 对象

一、概述

JS 的 BOM 对象就是浏览器对象模型，用于控制浏览器的行为，它提供了独立于内容与浏览器窗口进行交互的对象，BOM是一个分层结构：

二、window 对象

window对象表示浏览器窗口，所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员，全局变量是 window 对象的属性，全局函数是 window 对象的方法，编写时 window 可以省略

1、常用属性(对象)

document：对 Document 对象的只读引用
history：对 History 对象的只读引用
innerheight：返回窗口的文档显示区的高度
innerwidth：返回窗口的文档显示区的宽度
location：用于窗口或框架的 Location 对象
Navigator：对 Navigator 对象的只读引用

2、常用方法

alert()：显示带有一段消息和一个确认按钮的警告框
blur()：把键盘焦点从顶层窗口移开
clearInterval()：取消由 setInterval() 设置的 timeout
clearTimeout()：取消由 setTimeout() 方法设置的 timeout
close()：关闭浏览器窗口
confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框
createPopup()：创建一个 pop-up 窗口
focus()：把键盘焦点给予一个窗口
moveBy()：可相对窗口的当前坐标把它移动指定的像素
moveTo()：把窗口的左上角移动到一个指定的坐标
open()：打开一个新的浏览器窗口或查找一个已命名的窗口
print()：打印当前窗口的内容
prompt()：显示可提示用户输入的对话框
resizeBy()：按照指定的像素调整窗口的大小
resizeTo()：把窗口的大小调整到指定的宽度和高度
scrollBy()：按照指定的像素值来滚动内容
scrollTo()：把内容滚动到指定的坐标
setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式（一直执行）
setTimeout()：在指定的毫秒数后调用函数或计算表达式（执行一次）

<html>
	<head>
		<title>oneStar</title>
	</head>
	<body>
		<input type="button" value="open" onclick="funOpen()"/>
		<script type="text/javascript">
			//confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框
			var flage = window.confirm("是否删除？");
			if(flage == true){
				alert("删除成功！");
			}else{
				alert("删除失败！");
			}
			
			//prompt()：显示可提示用户输入的对话框
			window.prompt("请输入：","2");
			
			//open()：打开一个新的浏览器窗口或查找一个已命名的窗口
			function funOpen(){
				window.open("http://www.baidu.com","white = 300,height = 400");
			} 
			
			//关闭窗口
			//window.close();
			
			//setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式
			var id1 = window.setInterval("alert('oneStar')","3000");
			
			//clearInterval()：取消由 setInterval() 设置的 timeout
			clearInterval(id1);
			
			//setTimeout()：在指定的毫秒数后调用函数或计算表达式
			var id2 = window.setTimeout("alert('oneStar')",3000);
			
			//clearTimeout()：取消由 setTimeout() 方法设置的 timeout
			clearTimeout(id2);
			
		</script>
	</body>
</html>

三、History 对象

History 对象包含用户（在浏览器窗口中）访问过的 URL，History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。

1、常用属性

length：返回浏览器历史列表中的 URL 数量

2、常用方法

back()：加载浏览器历史列表中前一个url
forward()：加载 history 列表中的下一个 URL
go()：加载 history 列表中的某个具体页面

<html>
	<head>
		<title>oneStar</title>
	</head>
	<body>
		<a href="http://www.baidu.com">百度</a>
		<a href="http://www.sina.com.cn">新浪</a>
		<a href="http://www.sohu.com">搜狐</a>
		<button onclick="history.back()">前一个</button>
		<button onclick="history.forward()">后一个</button>
		<button onclick="history.go(1)">前进</button>
		<script type="text/javascript">
	</body>
</html>

四、Location对象

Location 对象包含有关当前 URL 的信息

1、常用属性

hash：设置或返回从井号 (#) 开始的 URL（锚）
host：设置或返回主机名和当前 URL 的端口号
hostname：设置或返回当前 URL 的主机名
href：设置或返回完整的 URL
pathname：设置或返回当前 URL 的路径部分
port：设置或返回当前 URL 的端口号
protocol：设置或返回当前 URL 的协议
search：设置或返回从问号 (?) 开始的 URL（查询部分）

2、常用方法

assign()：加载新的文档
reload()：重新加载当前文档
replace()：用新的文档替换当前文档

<html>
	<head>
		<title>oneStar</title>
	</head>
	<body>
		<input type="button" value="跳转" onclick="fun();"/>
		<br/>
		<script type="text/javascript">
			//href：设置或返回完整的 URL
			document.write(location.href);
			
			设置URL地址
			function fun(){
				window.location.href="../html/img1.html";
			}
		</script>
	</body>
</html>

五、Navigator 和 screen 对象

Navigator 对象：获取客户机的信息（浏览器的信息）
screen 对象：获取屏幕信息

<html>
	<head>
		<title>oneStar</title>
	</head>
	<body>
		<br/>
		<script type="text/javascript">
			//Navigator 对象：获取客户机的信息（浏览器的信息）
			document.write(navigator.appName);
			document.write("<hr/>");
			
			//screen 对象：获取屏幕信息
			document.write(screen.width);
			document.write("<br/>");
			document.write(screen.height);
		</script>
	</body>
</html>

ONESTAR博客

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript 的 BOM 对象（window 对象、History对象、Location 对象、Navigator 和 screen 对象）

目录一、概述二、window 对象1、常用属性(对象)2、常用方法三、History 对象1、常用属性2、常用方法四、Location对象1、常用属性2、常用方法五、Navigator 和 screen 对象一、概述JS 的 BOM 对象就是浏览器对象模型，用于控制浏览器的行为，它提供了独立于内容与浏览器窗口进行交互的对象，BOM是一个分层结构：...
复制链接

扫一扫