js点击返回跳转到指定页面实现过程

本文将详细介绍如何在JavaScript中实现点击返回跳转到指定页面的功能，并其背后的原理和存在的问题。由于我们使用的是HTML5的新API，所以这种方法在移动端尤为适用。

一、功能描述

在浏览器中新建标签页并指定一个后，正常情况下，由于当前标签页的历史记录为空，所以无法点击返回。但为了满足客户需求，我们需要在这种情况下，为其历史记录里添加一个链接（如首页）。这样，在新打开的页面，点击返回就可以跳转到首页，让用户看到系统的各种功能，推广平台。

二、知识要点

HTML5引入了history.pushState()方法和history.replaceState()方法，这两个方法允许我们逐条地添加和修改历史记录条目。它们可以协同window.onpopstate事件一起工作。

三、案例详解

假设我们访问了<

```javascript

var stateObj = { foo: "bar" };

history.pushState(stateObj, "page 2", "bar.html");

```

这样，虽然浏览器的地址栏会显示<

四、关于pushState()方法

pushState()方法有三个参数：一个状态对象、一个标题（现在会被忽略）和一个可选的URL地址。

1. 状态对象：与用pushState()方法创建的新历史记录条目关联。无论何时用户导航到新创建的状态，popstate事件都会被触发，事件对象的state属性包含历史记录条目的状态对象的拷贝。任何可序列化的对象都可以作为状态对象。考虑到未来可能会对该方法进行修改，建议传一个空字符串作为标题，或者传入一个简短的标题标明将要进入的状态。

2. 标题：目前FireFox浏览器会忽略该参数，但未来可能会使用。

3. 地址：新的历史记录条目的地址。浏览器不会在调用pushState()方法后加载该地址，但之后可能会尝试加载。新的URL不必是绝对路径，如果是相对路径，将以当前URL为基准。传入的URL与当前URL应该是同源的，否则，pushState()会抛出异常。该参数是可选的，不指定的话为文档当前URL。

通过利用HTML5的history API，我们可以在JavaScript中实现点击返回跳转到指定页面的功能。这种方法具有一定的参考价值，对于需要在特定场景下实现类似功能的小伙伴来说，值得一试。自从 Gecko 6.0（也就是 Firefox 6.0、Thunderbird 6.0 和 SeaMonkey 2.3）开始，对象序列化采用了结构化拷贝算法，这为更多类型的对象安全传输打开了方便之门。

关于 pushState() 方法，它的调用在某种程度上与设置 window.location='foo' 相似，都会在历史记录中创建并激活新的条目。pushState() 方法独具优势。

新URL可以是任意的同源URL，而使用window.location方法时，只有修改hash才能保证不离开当前文档。这意味着使用pushState()，你可以创建指向任意同源URL的历史记录条目。

你是否修改URL有了更多的选择权。而设置window.location='foo'只有在当前hash值不是foo时，才会创建新的历史记录。

最重要的是，你可以在历史记录条目中添加抽象数据。基于hash的方法则只能将相关数据编码为短字符串。这样的灵活性使得pushState()在处理复杂数据时更具优势。

值得注意的是，pushState()方法并不会触发hashchange事件，即使新的地址仅变更了hash。这对于需要管理历史记录但不希望触发额外事件的情况非常有用。

接下来谈谈popstate事件。每当历史记录发生变化时，都会触发这个事件。如果被激活的历史记录条目是由pushState或replaceState方法创建的，popstate事件的状态属性将包含历史记录状态对象的一个拷贝。这使得开发者可以方便地获取到历史记录的状态信息。

replaceState()方法则是history API的另一个重要部分。它与pushState()相似，但不同之处在于replaceState()会修改当前历史记录条目而不是创建新的条目。当你需要响应用户操作并更新当前历史记录条目的状态对象或URL时，使用replaceState()方法特别合适。

至于实现方法，有一个名为pushHistory()的函数可以判断当前history中的记录数。由于页面加载时浏览器会自动添加一个记录，所以当历史记录数小于2时，我们可以进行特定的操作。这个函数创建了两个state对象，第一个用于存储跳转页面的信息，第二个则是一个空state，用于替换当前URL而不进行页面跳转。这样设计是为了避免因为错误地更改第三个参数（即URL）导致的页面跳转错误。

代码精细解读：一个关于页面跳转与历史的独特实现

当页面准备就绪后，一段特殊的代码将在稍后的时刻开始其神秘的任务。这段代码延迟了大约300毫秒才开始执行，旨在避免与系统pop事件发生冲突，确保流畅的用户体验。这段代码是关于页面历史管理和跳转的创新实现。

当这段代码运行时，它首先会调用一个名为pushHistory的函数，然后在浏览器窗口上添加一个名为“popstate”的事件监听器。这个监听器能够捕捉到浏览器历史状态的变化。如果历史状态中存在一个带有有效URL的state对象，那么页面将会被重定向到这个URL。这是通过检查window.history.state对象并读取其url属性来实现的。如果url存在且有效，那么页面的location.href会被设置为这个url，从而完成页面的跳转。这就是利用浏览器历史API实现页面跳转的方法。