点击链接页面跳转，跳到另一个画面，返回后原页面还保持原样（有js点击效果）如何实现说下思路，有代码最

发布网友发布时间：2022-05-12 06:00

共3个回答

懂视网时间：2022-05-12 10:21

比如在页面A中点开了一个折叠列表（用jquery做的），并且向下拖动了一点滚动条，然后通过列表中的某个按钮跳转到了页面B，B页面中有一个goback按钮，点击一下就能跳回页面A，跳回页面A时，滚动条保持在之前离开时的状态，并且之前打开的那个折叠列表也要是保持打开的。有哪些html5 API或jquery API可以实现吗？
ps：我试了jquery 中的history.back()，可以实现滚动条位置不变，但是折叠列表变成了初始状态（也就是说和刷新了页面一样）。

回复内容：

谢邀。

实在太巧，三四天前我刚好做过这个效果。

页面分为两个，一个是列表页：
一个是内容页：

先说列表页：

你可以观察到我在列表页展开时是带有锚的，当列表页加载时，若 JS 检测到 URL 上有锚，展开对应的折叠列表；若 URL 上没有锚的时候，就展开第一个，并且滚动条不滚动。

当点击折叠列表的 panel-heading 时，使用 history.pushState(null, null, url) ，改变 URL 上的锚，并展开该折叠列表以及滚动到该折叠列表的顶部。
然后说一下内容页里的「返回」：
首先需要判断一下入口链接是什么，使用 document.referrer 即可。
然后可能出现以下两种情况：
1、用户是从你的折叠列表进入该内容页的，那么你可以使用 history.back()，这时之前使用 history.pushState() 改变的锚还保留，而且会自动展开并滚动到这个锚所对应的折叠列表。
2、用户是直接在地址栏输入链接进入的，此时你可以直接用 location.href = url 将它跳转到它的上一级链接中。
具体的效果你可以来我们网站看：计蒜客 - 让学习更有味，要进入内容页需要登录才行~ 你这种需求比较适合使用 URL 来保存状态，然后使用 URL 来进行事件驱动。这样的好处在于将各个页面的状态保存在各自的 URL 里，不管是使用浏览器的前进后退还是将当前链接分享给他人，都不会丢失页面状态。
驱动过程分为以下几步：
修改 URL (trigger) -> 解析 URL -> 调用对应的回调 (listener)
其中：

为了不引发界面刷新，修改 URL 时需要使用 URL hash 或者 history.pushState()。

当然如果不希望把一些状态保存在 URL 里，那也可以保存在 localStorage 里。但不变的是一定要用状态来驱动页面行为，而不是先执行页面行为然后再去保存状态。简单的状态可以放在hash里
再复杂点的可以放在localstorage或者sessionstorage里
要是再复杂的话，建议还是层叠多个视图吧，这样无论多复杂的状态都会保存题主如果用传统的整页刷新模式，那必然需要 hash 标记 + jQuery 插件响应的“打配合”方案。但这实在没必要，子栏目页面之间切换而产生的反复加载、解析、执行、渲染，会非常浪费性能……
所以，以“局部刷新”著名的 AJAX 模式，自然是实现“局部驻留”的极佳方案（IE 6 中的 Outlook Web 版是最早的实现）～
而且，jQuery 的 load() 实例方法已经把 AJAX Get 请求、jQuery empty()、jQuery html() 封装起来，分分钟实现局部刷新～
以上是用户浏览过程的“前进阶段”，而“后退阶段”就需要先在前进时留下历史记录，再在用户后退（浏览器后退功能或用户触发了前端工程师写的包含 history.back() 调用的代码）时恢复之前局部刷新过的正文子页面，并把页面主框架中的全局导航菜单指向对应的条目。这种为 AJAX 记录历史信息的技术就是 HTML 5 History API（history.pushState() 是其最常用的方法），IE 8/9 可以用 window.onhashchange 兼容，IE 6/7 就只能用 settimeout() 模拟 hashchange 事件或用 iframe 的 window.history 来记录 window.parent 的 AJAX 历史～
上述兼容在 Github 上已有成熟的开源库，也有结合 AJAX、pushState 的成熟框架 —— PJAX～
（习惯 jQuery 风格 API 的人，推荐一下本人开发的 PJAX 模式框架 —— EasyWebApp，托管于 Git@OSC —— http://git.oschina.net/Tech_Query/EasyWebApp ）网页的结构天然是不应当返回的，只有前进。
返回这块被浏览器拿去了。
自定义一个链接，跳转到另外的页面上。那就给目标页面增加Hash之类的状态识别。三个方法 1,hash 2,localstroge 3,cookie 之前用localstorage做过，把要保存的状态push到一个对象里，加载页面的时候判断对象，不过localstorage不能不能设定寿命，也就是说你无法在用户离开你的页面时清除，所以建议你试试sessionstorage，跟session的用法一样，会在用户离开时清除。

热心网友时间：2022-05-12 07:29

四种方法，任选

1、采用iframe，即点击之后，更新iframe，这样页面跳转了，但是左侧的导航还在，并且还是原样
2、采用COOKIE记录下当前展开的项
3、采用子窗口打开新页面
4、FF下，无须任何操作，浏览器会自动记录跳转之前的网页状态

热心网友时间：2022-05-12 08:47

Jquery zTree API