问题标签 [popstate]

我一直在做我的一个项目——完整的（重要的）JavaScript 可以在这里找到。我希望包含history.js，以便用户也可以使用浏览器的上一个和下一个按钮进行导航。此外，我希望生成的 URL 可以访问，即使它们不存在。这些 URL 由历史 API 生成，因此未链接到 HTML 文档。

我已经做了什么

通过查看插件的API Exposed 部分并阅读Mozilla 的文档，我已经成功地完成了这项工作：

• 使用界面的下一个、上一个和基本链接导航时，URL 是正确的
• 使用界面的下一个、上一个和基本链接导航时，标题是正确的

（精简）代码是：

这可以正常工作。

我似乎无法完成的事情

即使这工作得非常巧妙，如果没有最终功能，它也是无用的：

• 现在生成了 URL（例如/lamp，/desk等等），但是当用户直接转到这些链接之一（或只是重新加载页面）时，他或她将收到该 URL 不存在的消息
• 即使浏览器的导航按钮是可点击的（并且 url 会相应地改变），它根本不会改变内容。

任何人都可以对此提供任何反馈吗？我已经为此工作了很长时间，以至于我的背部受伤了。

我试图从 cjhveal 提供的代码中工作，并且到目前为止得到了这个（仅用于测试目的）：

奇怪的是，我无法让 History.js 记录到正确的标题......当我记录一个页面时，它返回如下：（"lamp", "bramvanroy.be/fullScreenSection/lamp"分别为title和url）而我需要获取该data-title部分对象中定义的标题。然而，我仍然调整了代码，以便 tit 应该data-url按照 section 中定义的方式工作，与返回的属性相同title，但仍然没有任何反应！

我有一个 div 滑出屏幕，加载新内​​容并滑回。我使用 jquery pjax，那部分效果很好：

但是，如果使用浏览器的后退/前进按钮，我将无法正常工作。我尝试了不同的东西。在这里我找到了一篇不错的文章，但我不明白：http ://artfindertech.wordpress.com/tag/historyapi/

问题是 div 的内容会在您单击浏览器后退按钮的那一刻发生变化。然后它滑出但不回来。此外，网址会在一秒钟内更改为上一页，但会跳转到网站的主网址。这是我对 popState 的试用：

我正在尝试将我的网站转换为具有 pushstate 和 popstate 控制位置的完整 html5 ajax 网站。

我目前的文件结构如下：

好的，所以当前所有文件都包含“common”文件夹中的“header.php”和“footer.php”文件。

我的页眉和页脚文件的基本版本如下所示：

Header.php（包括 pushState/popState/ajax 脚本）：

页脚.php：

现在，如果我将页眉和页脚包含在所有文件中，那么当我使用新的 HTTP 请求导航到它们的任何 URL 时，页面工作正常，但是当我尝试使用锚链接导航时，一些 CSS 样式引用父div 而不是页面，它通常不能完美显示。

另一方面，如果我不在索引页面以外的页面中包含页眉和页脚文件，则它们在从索引页面开始导航到它们时加载正常，但是如果我尝试使用直接指向任何新的 HTTP 请求显示 index.php 文件以外的文件 URL，而不仅仅显示原始页面内容，因为不包括包含所有脚本和 css 文件的头文件。

我需要确切地知道应该如何构建这样的网站，以便如果我访问 mysiteurl.com 则索引页面加载正常，并且如果我使用新的 http 请求直接导航到另一个页面，例如 mysiteurl.com/page3 .php 加载也很好，所有导航都正常工作。

提前感谢任何为我安排的人。

作为我正在构建的 web 应用程序的一部分，我需要在用户更改页面时检查用户是否已登录。在普通的非 ajax 站点上，这很容易，因为我可以将 PHP 会话条件语句放在标头中，并且在每次页面更改时调用的标头将确定是否显示登录页面，但将其视为头文件仅在初始加载的 ajax 应用程序中设置一次，我如何检查用户何时发出 ajax 页面请求会话是否仍然有效？由于我使用的是 pushState 和 popState 我知道我可以将条件设​​置为在 URL 更改时运行，但我不知道如何编写代码以在发生这种情况时运行检查。

任何和所有的帮助表示赞赏。

谢谢。

我可以找到对该方法的浏览器支持，pushState但我知道并非所有版本的浏览器实际上都会在popstate事件中传递状态对象。如果浏览器支持，我可以指望使用它pushState吗？

我正在为一个网站创建一个“门户”类型的页面，其中网站上的初始“登陆”阶段包含背景图像和非常少的内容，但单击标题为“关于我们”的链接会触发 AJAX 命令来加载页面' about.php' 到名为 'MoreDiv' 的 DIV 中 - 此外，触发 javascript 命令以将 'MoreDiv' 设置为可见，同时还隐藏初始文本 div（称为 'phototext'）和一个称为 'bottomlinks' 的附加 div。然后，文件“about.php”包含一个链接列表，这些链接调用 AJAX 以在名为“InnerContent”的不同 Div 中加载内容......这个 div 在“MoreDiv”中，因此链接列表保持在原位，并且只有底部页面的一部分发生变化。在链接列表中是“返回首页”

我已经使用 history.pushstate 来获取 URL 以查看我想要的方式，因为该页面是一个 PHP 文件，因此直接输入显示的 URL 将加载页面，并将正确的子页面加载到相应的 Div 中。

我现在遇到的问题是如何使用 history.popstate 将这些变体保存到浏览器历史记录中的页面，以便单击浏览器中的后退按钮将更改 Div 的内容....

Javascript：

然后页面在页面中有以下HTML（分别标记了主页和about.php）：

这就是页面的基本设置（一些文本只是为了填充空间）......所以我怎样才能让 history.popstate 工作以保持当前基于 javascript/AJAX 的链接到位但也改变基于历史状态的各个 DIV 的内容（和可见性）？谢谢。

（ps。此外，我希望能够使用“返回主页”链接来重置使用 history.pushstate 对 URL 所做的任何更改......因为目前我无法让它做任何事情，即使更改 URL添加“？home = y”）

我正在使用 AJAX 加载内容，并使用 pushastate 更改 URL，下面是我的代码，任何人都可以告诉我如何实现 onpopstate 以在我的情况下启用后退按钮。

HTML

JS

当用户单击链接时，首先我添加删除类以进行加载，然后我获取 URL 并从该 URL 获取页面名称（保存在“pageName”中），“target”是单击链接的 href attr 和“c”是我将在 url 中显示的值（例如，example.com/profile.jsp?tab=info，如果 href 是 info.jsp 则 'c' 将是 info），最后我正在调用 'loadContent' 函数它加载 ajax 内容并使用 pushState 更改 URL。

我正在尝试在我的网站上使用 soundcloud 的 html5 小部件，它会将小部件加载到 iframe 中。跟踪完成后，我通过使用他们的javascript api将另一个 url 加载到小部件并重新加载 iframe，如我所见。然后浏览器的后退按钮变为启用。当我按下后退按钮时，它会将小部件加载到上一个 url。但我也在我的页面上使用 ajax，并且后退按钮会将活动扳手投入工作。我想知道是否有一种方法可以防止 iframe 在按下后退按钮时推送历史记录或处理操作。你能帮忙吗？

我有一个简单的网页，即：

现在关于 Chrome 和 Firefox 如何触发popstate事件存在许多差异（当我开始测试 IE 时，我不寒而栗），但这里给我的问题是 Chrome 会在popstate 任何时候触发一个事件我单击这两个链接中的任何一个，然后在单击返回按钮时再次单击。Firefox 将触发更改哈希部分的链接的事件（如果哈希链接相同，则仅是第一次），如果我单击 Yahoo 链接然后单击后退按钮，则根本不会触发它。

那么有没有一种方法可以让我在 Firefox 中判断用户刚刚从不同域的完全不同站点返回并返回我的页面？在 Firefox 中是否有其他事件可以用于此目的？（当我从 yahoo.com 返回时，也不会触发加载事件。）

我正在尝试在按下内部链接时将 div 加载到我的页面中并推送历史状态以更改位置。我还试图让页面加载 popstate 上的前一个 div。我似乎无法使任何工作，甚至 return false 都没有，但我知道 jQuery 已包含在内，因为我可以在页面的另一部分使用它。有谁知道可能出了什么问题？