javascript - history.js 和标题重定向

标签 javascript php redirect history.js

我在使用 history.js 时遇到问题,我不知道如何解决。

在我正在处理的网站上,我们使用 history.js 在页面之间移动 - 如果您单击任何链接,history.js 会通过 AJAX 加载 URL,更新 URL 并为内容创建过渡效果。但是,我们还有包含项目的索引页面;如果您单击某个项目,则不会使用 history.js - 内容通过 ajax 加载并显示在弹出窗口中。还有一种情况是用户可以打开项目的 URL(例如在新选项卡中,或从搜索中),在这种情况下,用户应该被重定向到带有项目 URL 哈希的索引页面,这将告诉 JS 运行事件单击具有哈希 URL 的链接。然而,history.js 启动并重定向到项目 URL。

重申一下:

  • 用户来到/items/URL
  • 左键单击项目 (/item-[id]/URL),这会在弹出窗口中正常打开内容(AJAX 请求)
  • 右键单击项目并在新标签页中打开链接
  • 登陆/item-[id]/(不是 AJAX 请求),并通过 header 重定向重定向到/items/#/item-[id]/。
  • history.js 在加载后立即启动并将用户重定向到/item-[id]/

我正在使用 HTML5 版本的 history.js(我认为它不应该像这样,虽然我不知道)它会在 history.js 加载后立即重定向(页面上没有其他脚本)。除了将重定向更改为/items/?/item-[id]/(我认为)应该可以解决问题之外,还有其他方法可以解决此问题。


为了说明问题:

a.html

<html>
<body>
<script type='text/javascript' src="native.history.js"></script>
<a href="b.html#/b/">b</a>
</body>
</html>

b.html

<html>
<body>
<script type='text/javascript' src="native.history.js"></script>
<a href="a.html#/a/">a</a>
</body>
</html>

使用 native.history.js,它是 history.js 的纯 HTML5 版本,没有任何框架绑定(bind):https://github.com/browserstate/history.js/blob/master/scripts/bundled-uncompressed/html5/native.history.js

它说明了这一点,没有任何重定向。只要您点击任何链接,history.js 就会将您重定向到哈希后的 URL。

最佳答案

我决定直接修改 history.js 并添加一个选项 preventHashRedirect

-
#1820 // if (currentState ) {

+
#1820 // if (!History.options.preventHashRedirect && currentState ) {

解决了这个问题。 (基本上哈希更改不被视为 popstates,不会触发状态更改)。

可能会改变 isTraditionalAnchor函数(确定什么被视为 anchor 以及# 之后的 URL)来处理所有以 ! 开头的哈希值会是一个更好的主意。

-
#1052 // var isTraditional = !(/[\/\?\.]/.test(url_or_hash));

+
#1052 // var isTraditional = /^!/.test(url_or_hash) ? true : !/[\/\?\.]/.test(url_or_hash);

这样您实际上可以防止 history.js 影响任何以 ! 开头的重定向. (例如,如果您实际上有一个名称为 my.puppy 的 anchor ,则执行 <a href='#!my.puppy'> 不会导致通过 history.js 进行重定向。

@Martin Barker 的以下想法仍然有效,尽管添加额外的重定向让我觉得有点……粗鲁。

关于javascript - history.js 和标题重定向,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24757216/

相关文章:

javascript - 使用多维数组创建表 - 错误 : Cannot set property of undefined

php - 使用弹出窗口打开我的网站

.htaccess - 如何将所有 HTTPS 重定向到 HTTP

php - 如何在 Laravel 的 Controller 重定向时显示成功消息?

jquery - Ajax 重定向处理

javascript - 使用不透明度时无法点击事件监听器点击按钮

javascript - 在第一次单击时添加类并在第二次单击按钮时向下滚动

javascript - 如何在 JavaScript 中对数组进行 switch() ?

php - 合并两个图像的最快方法: server

php - 触发更新mysql值