当前位置：网站首页 > 技术文章 > 正文

JavaScript:history和location对象、JS设计模式系统讲解与应用

myzbx 2025-09-24 00:33 5 浏览

一、history对象

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

history对象的属性：length，返回浏览器历史列表中的 URL 数量。

history对象的方法：

back()：加载 history 列表中的前一个 URL。

forward()：加载历史列表中的下一个 URL。当页面第一次访问时，还没有下一个url。

go(number|URL): URL 参数使用的是要访问的 URL。而 number 参数使用的是要访问的 URL 在 History 的 URL 列表中的相对位置。go(-1)，到上一个页面。

1、013-history.html

<body>
	<a href="013-history-a.html">013-history-a.html</a>
	<h1>我是第一个页面</h1>
    <input type="button"  value="前进" onclick="window.history.forward();" />
    <script>
        console.log(window.history);
    </script>
</body>

2、013-history-a.html

<body>
	<a href="013-history-b.html">013-history-b.html</a>
	<h1>我是A页面</h1>
	<input type="button" value="后退"  onclick="window.history.back();"/>
</body>

3、013-history-b.html

<body>
	  <h1>我是B页面</h1>
	  <input type="button" value="第一个页面" onclick="window.history.go(-2);"/>
	  <input type="button" value="后退"  onclick="window.history.back();"/>
</body>

二、location对象

location 对象是window对象之一，提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。也可通过 window.location 属性来访问。

location 对象的属性 href：设置或返回完整的 URL

location 对象的方法

reload()：重新加载当前文档。

replace()：用新的文档替换当前文档。

<script type="text/javascript">
	function openBaidu(){
        // 没有历史记录,用新的文档替换当前文档
		// window.location.replace("http://www.baidu.com");
		// console.log(window.location.href); // 获取完整的url
		window.location.href = "http://www.baidu.com";
	}
</script>
<body>
	<input type="text"  value="" />
	<input type="button" value="刷新" onclick="window.location.reload();" />
	<input type="button"  value="百度" onclick="openBaidu();" />
</body>

三、JavaScript设计模式系统讲解与应用

关于JavaScript设计模式讲解应用这一块，建议学习下面这套教程即可，获取方式图片中有。

课程内容丰富完整，学习JavaScript非常不错。欢迎来学习JavaScript设计模式讲解与应用。

四、本节作业

实现时间计时功能
JS的跳转方式
本文是全套Java入门到架构师全套教程中的JavaScript中的BOM对象课程文档，如需完整体系大数据教程资源请留言评论或私聊。

JS History

上一篇：全新丰田 FJ Cruiser，要复活的入门硬派SUV
下一篇：From Mate70 to HarmonyOS NEXT: Huawei's pursuit of technological independence

JavaScript:history和location对象、JS设计模式系统讲解与应用

一、history对象

1、013-history.html

2、013-history-a.html

3、013-history-b.html

二、location对象

三、JavaScript设计模式系统讲解与应用

四、本节作业

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

8.7k star，一款超炫酷的动态可视化大屏项目

说下你的vue项目的目录结构，该怎么划分?

这么牛逼的cursor功能，赶紧用起来

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

用上Vue3，你真的变了吗?（vue3 key）

browser-use:AI 驱动的浏览器自动化神器——DOM识别与交互详解

巧克力:从一朵花开始的华丽变身_巧克力花束教程视频

20个免费音乐音效下载网站，无版权素材商业影片也可用