前端(JavaScript)函数_历史类

文档概述

轻语言网站开发中的历史类操作函数、用于管理浏览器历史记录,包含页面历史记录操作、前进后退控制、历史状态管理等功能,常用于单页应用路由、历史记录管理、页面状态恢复等场景。

  • 历史记录查询取历史记录数 返回历史列表中的网址数量,用于判断是否有上一页可返回
  • 前进后退后退页面 / 前进页面 等价于浏览器左上角的后退/前进按钮,无对应页面时操作无效
  • 指定跳转加载指定历史页面 支持数字参数(相对位置)或字符串参数(URL 匹配)

💡 历史记录注意后退页面/前进页面 是异步操作,且依赖历史记录存在。新标签页打开的页面历史记录为 1,无法后退。加载指定历史页面(-1) 等价于 后退页面加载指定历史页面(1) 等价于 前进页面

函数:取历史记录数()

返回历史列表中的网址数。

' 获取历史记录数量
变量 记录数 = 取历史记录数()
调试输出("历史记录数: " + 记录数)

' 判断是否有上一页可返回
如果(记录数 > 1)
	返回按钮.显示模式 = 显示_块
调试输出("可以返回上一页")
否则
	返回按钮.显示模式 = 显示_隐藏
调试输出("无历史记录可返回")
结束 如果

' 页面加载时根据历史记录控制返回按钮显示
页面.置被创建回调(() => {
	如果(取历史记录数() > 1)
		返回按钮.显示模式 = 显示_块
	否则
		返回按钮.显示模式 = 显示_隐藏
	结束 如果
})

函数:后退页面()

返回到上一个页面;如果上个页面存在的话。

' 返回上一页
后退页面()

' 点击返回按钮返回上一页
返回按钮.置被单击回调(() => {
	后退页面()
})

' 表单取消时返回
取消按钮.置被单击回调(() => {
	后退页面()
})

' 带历史记录判断的安全后退
返回按钮.置被单击回调(() => {
	如果(取历史记录数() > 1)
		后退页面()
	否则
		切换页面("首页")  ' 无历史记录则跳首页
	结束 如果
})

函数:前进页面()

前进到历史记录中的位于当前页面的下一个页面。

' 前进到下一页
前进页面()

' 点击前进按钮
前进按钮.置被单击回调(() => {
	前进页面()
})

' 监听前进后退状态更新按钮
页面.置被显示回调(() => {
	如果(取历史记录数() > 1)
		前进按钮.可用 = 真
	后退按钮.可用 = 真
	否则
		前进按钮.可用 = 假
	结束 如果
})

函数:加载指定历史页面(值)

加载历史列表中的某个具体的页面,该参数值可以是数字,(-1上一个页面,1前进一个页面),或一个字符串,字符串必须是局部或完整的URL,该函数会去匹配字符串的第一个URL。

' 后退2页(跳过中间页面)
加载指定历史页面(-2)

' 前进1页
加载指定历史页面(1)

' 刷新当前页(相当于0)
加载指定历史页面(0)

' 通过URL匹配跳转(匹配历史记录中的URL)
加载指定历史页面("about.html")

' 通过完整URL跳转
加载指定历史页面("https://www.example.com/news")

' 返回首页(相对位置跳转)
首页按钮.置被单击回调(() => {
	加载指定历史页面("index.html")
})

学习要点

知识点代码示例说明
历史记录数取历史记录数()返回历史列表长度,>1 表示有上一页可返回
后退操作后退页面()返回上一页,等价于 加载指定历史页面(-1);无历史记录时无效
前进操作前进页面()前进到下一页,等价于 加载指定历史页面(1);需先有后退操作才能前进
相对跳转加载指定历史页面(-2)数字参数:负数后退N页、正数前进N页、0刷新当前页
URL匹配跳转加载指定历史页面("about.html")字符串参数:匹配历史记录中第一个含此URL的页面
异步特性后退页面() 后需配合 置被显示回调历史操作是异步的,页面切换后用 置被显示回调 监听并更新UI
显示控制显示模式 = 显示_块 / 显示_隐藏控制元素显示/隐藏,常用于根据历史记录显示返回按钮

相关文档

  • 文档前端(JavaScript)函数_URL地址操作类 —— 取URL完整地址重载页面 等URL操作
  • 文档前端(JavaScript)函数_浏览器操作类 —— 切换页面弹出提示 浏览器控制函数
  • 文档前端(JavaScript)函数_窗口操作 —— 打开窗口关闭窗口 窗口管理函数
  • 文档前端(JavaScript)函数_储存类 —— 保存配置 存储页面状态用于恢复
  • 文档前端(JavaScript)函数_文档操作 —— 查找元素ByID 等DOM操作函数