【你也能从零基础学会网站开发】Web建站之javascript入门篇 History对象与Location对象

🚀 个人主页 极客小俊
✍🏻 作者简介:程序猿、设计师、技术分享
🐋 希望大家多多支持, 我们一起学习和进步!
🏅 欢迎评论 ❤️点赞💬评论 📂收藏 📂加关注

History历史对象

对象介绍属于window的子对象, 常用于返回到已经访问过的页面!

常见方法如下表:

方法功能说明
history.length历史记录数
history.back()返回上一页
history.forward()前进一页
history.go()前进或后退num页,num为0时表示页面刷新

举个栗子

<input type="button" value="返回" onclick="history.back()">
<input type="button" value="前进" onclick="history.forward()">
<input type="button" value="刷新" onclick="history.go(0)">

相当于:

小知识

有时候,需要从一个页面直接跳到另一个页面。
此时可以通过调用history对象的go方法来实现,该方法可以直接跳转到某个历史URL。
例如以下代码可以跳转到地址列表中编号为当前位置减n的地址所指的页面。
语法: history.go(n)
当n>0时,装入历史表中的往前数的第n个页面;n=0时装入当前页面;n<0时,装入历史表中往后数的第n个页面。

另一种更为直接的跳转方法是使用地址对象,设置地址对象的location属性即可打开指定的地址卸载文档 。

如图

举个栗子

<script>//指定秒数var scnds = 5;function Go(){var info = document.getElementById('info');--scnds;if(scnds==0){window.location.href="https://www.baidu.com";}else{info.innerHTML='浏览器将在'+scnds+'秒以后自动跳转到百度!';}}//定时器setInterval(Go,1000);
</script><h2 id="info"></h2>

history对象其主要作用是用来跟踪窗口中曾经使用的URL,由document对象的history属性保持引用。通过使用history对象可以获知浏览器窗口近来访问过的网页个数,还可以实现从一个页面跳到另一个页面,在实际应用中,如涉及到页面的跳转问题,可以用这个对象来解决 , 前进到上一页和后退到下一页使用history对象的back和forward方法,可以实现和浏览器提供的后退和前进功能。

例如:

history.back() 
history.forward() 

Location对象

属于window的子对象,常用于获取和改变当前浏览的网址

Location对象常用的属性:

href 	             	当前窗口正在浏览的网页地址
replace(url)		转向到url网页地址
reload()			重新载入当前网址,同按下刷新按钮

我们可以获取Location对象的所有属性看看!

例如:

var showtext = "Location对象属性列表:<br>";for (var propname in location) {showtext += propname + ": " + location[propname] + "<br>";}document.write(showtext);

如图

URL小知识

URL也就是路径地址的意思,在网页中指的是访问的路径。

它的构成是有一定的规范的,通常情况下,一个URL会有下面的格式:

协议(//)+主机:端口(/)+路径名称(#)+哈希标识(?)+搜索条件

这些部分是满足这样的要求的:

协议是URL的起始部分,直到包含到第一个冒号
主机描述了主机和域名,或者一个网络主机的IP地址
端口描述了服务器用于通讯的通讯端口 路径名称描述了URL的路径方面的信息

哈希标识描述了URL中的锚名称,包括哈希掩码(#)。此属性只应用于HTTP的URL
搜索条件字符串包含变量和值的配对,每对之间由一个&连接。

获取指定地址的各属性值

通常在网页编程时,会涉及对地址的处理的问题,如页面间的参数传递等,这些都与地址本身的一些属性有关。

这些属性大多都是用来引用当前文档的URL的各个部分。

举个栗子

with(document){var url = window.location.hrefwrite("地址协议:"+location.protocol+"<br/>")write("主机名:"+location.hostname+"<br/>")write("商品号:"+location.host+"<br/>")write("路径名:"+location.pathname+"<br/>")write("整个地址:"+url+"<br/>")}document.write(showtext);

如图


加载新网页

在网页设计过程中,时常会用到加载一个新的网页的情况。

这时仍然可以用Location对象。它的href属性就可以轻松完成这一功能,该属性返回值为当前文档的URL,如果将该属性值设置为新的URL,那么浏览器会自动加载该URL的内容,从而达到加载一个新的网页的目的。

如图

装载新文档与重新装入当前文档

文档的装载在应用中也是比较常见的,然而它的装方式一共就三种,

assign、replace、reload这三个方法。

其中reload方法用于根据浏览器reload按钮定义的策略重新装入窗口的当前文档。

replace方法取一个URL参数,从当前文档历史清单中装入URL,并显示指定页面。

代码


<script>
function Assign() {location.assign("https://www.baidu.com");//加载一个新文档,和location对象的href属一样}function Replace() {location.replace("https://mail.163.com");//使用新的URL替换当前文档,不加入到浏览器的历史中}function Reload() {location.reload("https://www.google.cn/");// 重新载入当前文档,有一个bool参数}
</script><div onClick="Assign()">前往百度首页</div>
<div onClick="Reload()">163邮箱登录</div>
<div onClick="Reload()">前往google首页</div>

刷新文档

在实际应用中,经常会涉及到对文档的刷新,JavaScript提供了一种刷新方法。
使用Location对象的reload()方法可以刷新当前文档。

reload()方法的语法代码如下所示:

location.reload(loadType) 

加载新文档

加载一个新文档,除了用open方法以外还可以用Location对象所提供的方法。
Location对象所提供的replace方法可以用一个URL来取代当前窗口的URL,
以达到加载新文档的效果 。

replace方法的语法代码如下所示:

location.replace(url) 

"👍点赞" "✍️评论" "收藏❤️"

大家的支持就是我坚持下去的动力!

如果以上内容有任何错误或者不准确的地方,🤗🤗🤗欢迎在下面 👇👇👇 留个言指出、或者你有更好的想法,
欢迎一起交流学习❤️❤️💛💛💚💚

更多 好玩 好用 好看的干货教程可以 点击下方关注❤️ 微信公众号❤️
说不定有意料之外的收获哦..🤗嘿嘿嘿、嘻嘻嘻🤗!
🌽🍓🍎🍍🍉🍇

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/535957.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

IO复用之select

目录 一.select方法介绍 2.1 select 系统调用的原型 2.2 集合的数据结构 2.2.1 fd_set 结构如下: 2.2.2 关于集合fd_set的解析 2.3 select第一个参数 2.4 select方法之超时时间timeout 2.5 select方法的用法简述及返回值 2.6 如何检测集合中有哪些描述符有事件就绪 三…

Xterminal:未来的终端体验

✅作者简介&#xff1a;大家好&#xff0c;我是Leo&#xff0c;热爱Java后端开发者&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f34e;个人主页&#xff1a;Leo的博客 &#x1f49e;当前专栏&#xff1a; 开发环境篇 ✨特色专栏&#xff1a; M…

【前端】HTML常用标签

因为想当个全栈&#xff0c;所以巩固了一下HTML与CSS和JS基础&#xff0c;这一篇博客是HTML部分 文章目录 HTML 基础标签 1HTML 基础框架HTML 基础标签语义标签文本格式化标签div 与 span 标签图像标签超链接特殊字符 基础标签 2 | 表格表格的使用表格标签表格属性表格的头部与…

按键开关机的锂电池充放电解决方案

一、产品概述 TP4562 是一款集成线性充电管理、同步升压转换、电池电量指示和多种保护功能的单芯片电源管理SOC&#xff0c;为锂电池的充放电提供完整的单芯片电源解决方案。 TP4562 内部集成了线性充电管理模块、同步升压放电管理模块、电量检测与 LED 指示模块、保护模块、…

DAY by DAY 史上最全的Linux常用命令汇总----man

man是按照手册的章节号的顺序进行搜索的。 man设置了如下的功能键&#xff1a; 功能键 功能 空格键 显示手册页的下一屏 Enter键 一次滚动手册页的一行 b 回滚一屏 f 前滚一屏 q 退出man命令 h 列出所有功能键 /word 搜索word字符串 注意&#xff1a…

04-自媒体文章-自动审核

自媒体文章-自动审核 1)自媒体文章自动审核流程 1 自媒体端发布文章后&#xff0c;开始审核文章 2 审核的主要是审核文章的内容&#xff08;文本内容和图片&#xff09; 3 借助第三方提供的接口审核文本 4 借助第三方提供的接口审核图片&#xff0c;由于图片存储到minIO中&…

详解Python中%r和%s的区别及用法

首先看下面的定义&#xff1a; %r用rper()方法处理对象 %s用str()方法处理对象 函数str() 用于将值转化为适于人阅读的形式&#xff0c;而repr() 转化为供解释器读取的形式&#xff08;如果没有等价的语法&#xff0c;则会发生SyntaxError 异常&#xff09; 某对象没有适于人…

2024春招看了上百份程序员简历,这个工具写的简历最好!(附模板)

你们在制作简历时&#xff0c;是不是基本只关注两件事&#xff1a;简历模板&#xff0c;还有基本信息的填写。 当你再次坐下来更新你的简历时&#xff0c;可能会发现自己不自觉地选择了那个“看起来最好看的模板”&#xff0c;填写基本信息&#xff0c;却没有深入思考如何使简历…

【网络工程师进阶之路】BFD技术

个人名片&#xff1a;&#x1faaa; &#x1f43c;作者简介&#xff1a;一名大三在校生&#xff0c;喜欢AI编程&#x1f38b; &#x1f43b;‍❄️个人主页&#x1f947;&#xff1a;落798. &#x1f43c;个人WeChat&#xff1a;hmmwx53 &#x1f54a;️系列专栏&#xff1a;&a…

leetcode刷题(javaScript)——分治思想(二分查找、快速排序)相关场景题总结

分治思想是一种将问题分解成更小的子问题&#xff0c;然后解决子问题并将结果合并的算法设计策略。二分查找、快速排序和折半查找都属于分治思想的经典算法。在leetcode里&#xff0c;分治思想一般结合其他场景出现&#xff0c;构成复合型题目。但是在看题时一定要了解能否用分…

前端Vue列表组件 list组件:实现高效数据展示与交互

前端Vue列表组件 list组件&#xff1a;实现高效数据展示与交互 摘要&#xff1a;在前端开发中&#xff0c;列表组件是展示数据的重要手段。本文将介绍如何使用Vue.js构建一个高效、可复用的列表组件&#xff0c;并探讨其在实际项目中的应用。 效果图如下&#xff1a; 一、引言…

数码管的动态显示(二)

1.原理 这个十六进制是右边的dp为高位。 数码管的动态显示&#xff0c;在第一个计数周期显示个位&#xff0c;在第二个周期显示十位&#xff0c;在第三个周期显示百位由于人眼的视觉和数码管的特性&#xff0c;感觉就是显示了234&#xff0c;每个数码管的显示需要从输入的数据里…