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

boyanx5个月前技术教程24

一、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设计模式讲解与应用。

四、本节作业

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

相关文章

减少复杂性!JavaScript 2024 发展趋势预判

【CSDN 编者按】这是一篇由 Ryan Carniato 于2023年12月29日发表的关于「2024年JavaScript 框架发展趋势」的文章。作者认为 2023 年是 JavaScript 框...

js时间插件Dayjs相对Momentjs的优势

js时间插件Day.js和Moment.js区别昨天发了一些插件的汇总,在评论中有个网友建议把Moment.js换成Day.js,今天特意去学习了Day.js,发现比Moment.js强大很多首先看一...

想快速学习JavaScript ,你必须先知道这几点

对于初学JavaScript ,或者其他任何一种语言。常常会遇到一些问题,比如概念可能会造成混淆 ,找不到时间(有时是动力)学习,很容易忘记已经理解了的东西,工具多又在不断变化,所以不知道从哪里开始...

前端面试: 使用js的 Date 对象来将日期和时间拼接成时间戳格式

问题描述:js 实现某年月日时间如2023-05-23和某一段时分的时间如12:30进行拼接转化成时间戳格式。解决方案1.可以使用 JavaScript 的 Date 对象来将日期和时间拼接成时间戳格...

JavaScript倒计时怎么写?(js倒计时函数)

案例:倒计时案例分析:1.这个倒计时是不断变化的,因此需要定时器来自动变化(setInterval)2.三个黑色盒子里面分别存放时分秒3.三个黑色盒子利用innerHTML放入计算的小时分钟秒数4.第...

Firefox火狐浏览器总结2023年:网页加载、JS执行速度均有提升

IT之家 11 月 27 日消息,Mozilla 日前发布官方新闻稿,盘点了 FireFox 火狐浏览器在 2023 年取得的进展,主要围绕速度方面做出了三大改进,分别是网页加载速度、键盘响应速度、J...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。