草庐IT

javascript - 浏览器后退和前进按钮不使用 history.js 的 statechange 事件调用回调方法

coder 2025-02-23 原文

我使用了(https://github.com/browserstate/history.js)并且有一段这样的代码

History.Adapter.bind(window, 'statechange', function() { 
    var State = History.getState();
    alert('Inside History.Adapter.bind: ' + State.data.myData);
});

function manageHistory(url, data, uniqueId){
    var History = window.History;
    if ( !History.enabled ) { return false; }        
    History.replaceState({myData: data}, null, '?stateHistory=' + uniqueId);
}

如果我调用 manageHistory()在我的 ajax 调用之后，然后 History.Adapter.bind正确调用回调方法。但是，如果我单击浏览器后退，然后单击前进按钮，导致页面导航从 B 到 A，然后 A 返回 B，回调内部方法 History.Adapter.bind不会被调用。这发生在 chrome 和 IE9 上。任何人都知道如何解决这个问题，我需要得到 State单击浏览器后退然后前进，以更新我的 DOM。请帮忙

注意:我使用 1.7.1 版本的 jquery.history.js 用于 html4 浏览器 IE9

更新(2013 年 5 月 3 日):多谈谈我的要求

抱歉，我正忙于其他任务，直到现在我有时不得不看这个问题。所以oncomplete在 ajax 调用中，我获取了返回给我的信息，并将其插入状态。我的要求是:如果我从页面 A 导航到页面 B，然后在页面 B 上，我执行许多导致 DOM 操作的 ajax 请求(让每个导致 DOM 操作的 ajax 请求称为 state )。如果我点击后退按钮，我应该返回到页面 A，如果我点击前进按钮，我应该转到页面 B，我之前的状态是上次。

所以我的想法是，oncomplete在我的 ajax 请求中，我会用我当前的状态替换历史上的最后一个状态(我的 json 对象是我从 ajax 请求返回的 html)。如果我使用推送状态，假设我在页面 B，然后单击一个按钮，我的页面现在变为 aaa , 我 pushState aaa .然后，如果我点击其他按钮，我的页面现在变为 bbb , 我 pushState bbb .如果我现在点击后退按钮，我仍然会在页面 B，我的状态在 History.Adapter.bind(window, 'statechange', function() {}) 中。显示为 aaa ，如果我再次单击后退按钮，我会转到页面 A。我不希望出现这种情况。我希望如果我在状态为 bbb 的页面 B 上，然后单击后退，我将转到页面 A，如果我单击前进，我将转到状态为 bbb 的页面 B。 .我希望这更有意义。请帮忙

最佳答案

你需要做的事情如下:

  • 如果您来自的页面是另一个页面(例如，您打开页面 B 而上一个页面是页面 A)，则执行 pushState。
  • 另一方面，如果上一页与您当前所在的页面相同，您只需执行 replaceState，将信息替换为有关您当前状态的信息。

(您需要在某些变量中手动跟踪上一页)

这意味着如果您从 A 转到 B (pushState) 到 B 的新状态 (replaceState)，后退按钮(转到 A 的状态信息)和下一步前进(转到 B 的最新状态)。此外，如果您第一次打开 A，则需要使用有关 A 状态的信息执行 replaceState，这样 A 至少会有一些状态(否则它将有一个空数据对象)。

查看 this answer 可能会有用我的，这只是关于使用 pushStates 构建有序历史堆栈的方式。当然不完全是您想要的，但它的编写要简单一些，再加上这个答案中的信息，它应该能让您获得想要的行为。

关于javascript - 浏览器后退和前进按钮不使用 history.js 的 statechange 事件调用回调方法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16164210/

statechangejavascriptcodeHistorysectionjquerybrowser-historypushstatehistory.js

有关javascript - 浏览器后退和前进按钮不使用 history.js 的 statechange 事件调用回调方法的更多相关文章

  1. ruby - 在 Ruby 中用键盘诅咒数组浏览 - 2

    我正在尝试在Ruby中制作一个cli应用程序，它接受一个给定的数组，然后将其显示为一个列表，我可以使用箭头键浏览它。我觉得我已经在Ruby中看到一个库已经这样做了，但我记不起它的名字了。我正在尝试对soundcloud2000中的代码进行逆向工程做类似的事情，但他的代码与SoundcloudAPI的使用紧密耦合。我知道cursesgem，我正在考虑更抽象的东西。广告有没有人见过可以做到这一点的库或一些概念证明的Ruby代码可以做到这一点？ 最佳答案 我不知道这是否是您正在寻找的，但也许您可以使用我的想法。由于我没有关于您要完成的工作

  2. 使用 ACL 调用 upload_file 时出现 Ruby S3 "Access Denied"错误 - 2

    我正在尝试编写一个将文件上传到AWS并公开该文件的Ruby脚本。我做了以下事情:s3=Aws::S3::Resource.new(credentials:Aws::Credentials.new(KEY,SECRET),region:'us-west-2')obj=s3.bucket('stg-db').object('key')obj.upload_file(filename)这似乎工作正常，除了该文件不是公开可用的，而且我无法获得它的公共(public)URL。但是当我登录到S3时，我可以正常查看我的文件。为了使其公开可用，我将最后一行更改为obj.upload_file(file

  3. ruby-on-rails - 浏览 Ruby 源代码 - 2

    我的主要目标是能够完全理解我正在使用的库/gem。我尝试在Github上从头到尾阅读源代码，但这真的很难。我认为更有趣、更温和的踏脚石就是在使用时阅读每个库/gem方法的源代码。例如，我想知道RubyonRails中的redirect_to方法是如何工作的:如何查找redirect_to方法的源代码？我知道在pry中我可以执行类似show-methodmethod的操作，但我如何才能对Rails框架中的方法执行此操作？您对我如何更好地理解Gem及其API有什么建议吗？仅仅阅读源代码似乎真的很难，尤其是对于框架。谢谢! 最佳答案 Ru

  4. c# - 如何在 ruby​​ 中调用 C# dll？ - 2

    如何在ruby​​中调用C#dll？ 最佳答案 我能想到几种可能性:为您的DLL编写(或找人编写)一个COM包装器，如果它还没有，则使用Ruby的WIN32OLE库来调用它；看看RubyCLR,其中一位作者是JohnLam，他继续在Microsoft从事IronRuby方面的工作。(估计不会再维护了，可能不支持.Net2.0以上的版本)；正如其他地方已经提到的，看看使用IronRuby，如果这是您的技术选择。有一个主题是here.请注意，最后一篇文章实际上来自JohnLam(看起来像是2009年3月)，他似乎很自在地断言RubyCL

  5. java - 从 JRuby 调用 Java 类的问题 - 2

    我正在尝试使用boilerpipe来自JRuby。我看过guide从JRuby调用Java，并成功地将它与另一个Java包一起使用，但无法弄清楚为什么同样的东西不能用于boilerpipe。我正在尝试基本上从JRuby中执行与此Java等效的操作:URLurl=newURL("http://www.example.com/some-location/index.html");Stringtext=ArticleExtractor.INSTANCE.getText(url);在JRuby中试过这个:require'java'url=java.net.URL.new("http://www

  6. ruby - 调用其他方法的 TDD 方法的正确方法 - 2

    我需要一些关于TDD概念的帮助。假设我有以下代码defexecute(command)casecommandwhen"c"create_new_characterwhen"i"display_inventoryendenddefcreate_new_character#dostufftocreatenewcharacterenddefdisplay_inventory#dostufftodisplayinventoryend现在我不确定要为什么编写单元测试。如果我为execute方法编写单元测试，那不是几乎涵盖了我对create_new_character和display_invent

  7. 【鸿蒙应用开发系列】- 获取系统设备信息以及版本API兼容调用方式 - 2

    在应用开发中，有时候我们需要获取系统的设备信息，用于数据上报和行为分析。那在鸿蒙系统中，我们应该怎么去获取设备的系统信息呢，比如说获取手机的系统版本号、手机的制造商、手机型号等数据。1、获取方式这里分为两种情况，一种是设备信息的获取，一种是系统信息的获取。1.1、获取设备信息获取设备信息，鸿蒙的SDK包为我们提供了DeviceInfo类，通过该类的一些静态方法，可以获取设备信息，DeviceInfo类的包路径为：ohos.system.DeviceInfo.具体的方法如下：ModifierandTypeMethodDescriptionstatic StringgetAbiList​()Obt

  8. C51单片机——实现用独立按键控制LED亮灭（调用函数篇） - 2

    说在前面这部分我本来是合为一篇来写的，因为目的是一样的，都是通过独立按键来控制LED闪灭本质上是起到开关的作用，即调用函数和中断函数。但是写一篇太累了，我还是决定分为两篇写，这篇是调用函数篇。在本篇中你主要看到这些东西！！！1.调用函数的方法（主要讲语法和格式）2.独立按键如何控制LED亮灭3.程序中的一些细节（软件消抖等）1.调用函数的方法思路还是比较清晰地，就是通过按下按键来控制LED闪灭，即每按下一次，LED取反一次。重要的是，把按键与LED联系在一起。我打算用K1来作为开关，看了一下开发板原理图，K1连接的是单片机的P31口，当按下K1时，P31是与GND相连的，也就是说，当我按下去时

  9. ruby - 如何找到调用当前方法的方法 - 2

    如何找到调用此方法的位置？defto_xml(options={})binding.pryoptions=options.to_hifoptions&&options.respond_to?(:to_h)serializable_hash(options).to_xml(options)end 最佳答案 键入caller。这将返回当前调用堆栈。文档:Kernel#caller.例子[0]%rspecspec10/16|===================================================62=====

  10. ruby-on-rails - 使用 HTTParty 的非常基本的 Rails 4.1 API 调用 - 2

    Rails相对较新。我正在尝试调用一个API，它应该向我返回一个唯一的URL。我的应用程序中捆绑了HTTParty。我已经创建了一个UniqueNumberController，并且我已经阅读了几个HTTParty指南，直到我想要什么，但也许我只是有点迷路，真的不知道该怎么做。基本上，我需要做的就是调用API，获取它返回的URL，然后将该URL插入到用户的数据库中。谁能给我指出正确的方向或与我分享一些代码？ 最佳答案 假设API为JSON格式并返回如下数据:{"url":"http://example.com/unique-url"

随机推荐