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

1、js点击返回跳转到指定页面实现过程_ 这篇文章主要介绍了js点击返回跳转到指定页面实现过程,需要的伴侣可以参考下 这个功能之前有简洁的带过，这次具体的讲解下原理和存在的问题（由于是运用html5的新API 所以有兼容问题，推举移动端用法该方法）。 功能描述： 在扫瞄器中新建标签页并指定一个网址，网页加载完毕后，正常流程下是不允许点击返回的。由于当前标签页的相关历史记录是没有的，所以没有记录可以返回。 应客户要求，需要在这种状况下，给他的历史记录里添加一个链接（比如首页），这样在新打开的页面，点击返回就可以跳转到首页，让用户看到系统的各种功能，推广平台。 一、学问要点 HTML5引进了histo

2、ry.pushState()方法和history.replaceState()方法，它们允许你逐条地添加和修改历史记录条目。这些方法可以协同window.onpopstate大事一起工作。 案例： 假设 l 将执行如下JavaScript代码： 代码如下: var stateObj = foo: bar ; history.pushState(stateObj, page 2, bar.html); 这将让扫瞄器的地址栏显示l，但不会加载bar.html页面也不会检查bar.html是否存在。 假设现在用户导航到了l，并且页面会触发popstate大事，该大事中的状态对象（state obje

3、ct）包含stateObj的一个拷贝。该页面看起来像foo.html，尽管页面内容可能在popstate大事中被修改。 假如我们再次点击后退按钮，URL将变回l 文档将触发另一个popstate大事，这次的状态对象为null。回退同样不会转变文档内容。 pushState()方法 pushState()有三个参数：一个状态对象、一个标题（现在会被忽视），一个可选的URL地址。下面来单独考察这三个参数的详情： 状态对象（state object） 一个JavaScript对象，与用pushState()方法创建的新历史记录条目关联。无论何时用户导航到新创建的状态，popstate大事都会被触发，

4、并且大事对象的state属性都包含历史记录条目的状态对象的拷贝。 任何可序列化的对象都可以被当做状态对象。由于FireFox扫瞄器会把状态对象保存到用户的硬盘，这样它们就能在用户重启扫瞄器之后被还原，我们强行限制状态对象的大小为640k。假如你向pushState()方法传递了一个超过该限额的状态对象，该方法会抛出特别。假如你需要存储很大的数据，建议用法sessionStorage或localStorage。 标题（title） FireFox扫瞄器目前会忽视该参数，虽然以后可能会用上。考虑到将来可能会对该方法进行修改，传一个空字符串会比较平安。或者，你也可以传入一个简短的标题，标明将要进入的

5、状态。 地址（URL） 新的历史记录条目的地址。扫瞄器不会在调用pushState()方法后加载该地址，但之后，可能会试图加载，例如用户重启扫瞄器。新的URL不肯定是肯定路径；假如是相对路径，它将以当前URL为基准；传入的URL与当前URL应当是同源的，否则，pushState()会抛出特别。该参数是可选的；不指定的话则为文档当前URL。 留意： 在 Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) 至 Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2) 中，传入的对象

6、用法JSON来进行序列化。从 Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3)开头，对象用法结构化拷贝算法来进行序列化。这将允许更多类型的对象能够平安传入。 某种意义上，调用pushState()有点类似于设置window.location=#foo，它们都会在当前文档内创建和激活新的历史记录条目。但pushState()有自己的优势： 1、新的URL可以是任意的同源URL，与此相反，用法window.location方法时，只有仅修改 hash 才能保证停留在相同的document中。 2、依据个人需要来决定是否修改URL。相

7、反，设置window.location=#foo，只有在当前hash值不是foo时才创建一条新历史记录。 3、你可以在新的历史记录条目中添加抽象数据。假如用法基于hash的方法，你只能把相关数据转码成一个很短的字符串。 留意pushState()方法永久不会触发hashchange大事，即便新的地址只变更了hash。 popstate大事 每当激活的历史记录发生改变时，都会触发popstate大事。假如被激活的历史记录条目是由pushState所创建，或是被replaceState方法影响到的，popstate大事的状态属性将包含历史记录的状态对象的一个拷贝。 replaceState()方法

8、 history.replaceState()操作类似于history.pushState()，不同之处在于replaceState()方法会修改当前历史记录条目而并非创建新的条目。 当你为了响应用户的某些操作，而要更新当前历史记录条目的状态对象或URL时，用法replaceState()方法会格外合适。 二、实现思路 1.利用popstate大事，监听点击返回大事。 2.触发大事时，推断当前页面的历史记录 是否有页面可以返回。 3.假如没有页面可以返回，则插入两条记录： 1）、指定的跳转页面。 2）、空记录。（使当前页面不发生改变） 三、实现方法 /返回之前没页面则返回首页 function

9、 pushHistory() if (history.length 2) var state = title: index, url: getHttpPrefix + index.html ; window.history.pushState(state, index, location.href); state = title: index, url: ; window.history.pushState(state, index, ); /lll(history.state + history.state) /console.log(history.state) 推断当前history中的

10、记录个数，由于页面加载的时候，扫瞄器会自动push进一个记录。所以要推断长度是否小于2. 塞进的state对象是为了猎取对应的url链接。 留意点： 第一个pushState我将跳转url放进state对象 便利跳转操作。其次个参数没有实际意义，由于现在的扫瞄器基本不适用这个参数。 第三个参数是会替换当前地址栏的链接的，但是页面不会发生跳转。（我之前犯了个错误，将第三个参数设置为首页链接，导致了地址栏更改为首页链接，以至于在当前页的链接 都以首页为基础进行跳转，导致页面的全部链接都跳转错误了。） setTimeout(function () pushHistory() window.addEv

11、entListener(popstate, function (e) lll(popstate+window.history.state) if (window.history.state != null window.history.state.url != ) location.href = window.history.state.url ); , 300); 这段代码放置在页面的ready大事中执行，延迟300毫秒是为了将操作滞后，防止与系统pop大事冲突。 if语句为了推断 history是否存在state对象，由于只有满足我们要求的记录才会有我们添加的state对象 所以 依据这点可以进行页面的跳转操作。 这样就可以实现我们想要的效果。 四、写在最终 缺点： 1.