jquery.history.js VS jquery-hashchange
见http://balupton.github.io/jquery-history/demo/
我被jquery.history.js吸引了
我发现的意思是
http://benalman.com/code/projects/jquery-hashchange/examples/document_domain/
我认为第二个是基于JQuery。 我的意思是它不需要任何额外的插件而不是jQuery。
jquery.history.js有什么特别之处? 哈希变化?
我应该使用哪个来覆盖我的浏览器后退和前进按钮?
编辑 – 2013年末
另一个名为“sammy.js”的哈希库也很受欢迎。 它有一个很好的客户端路由映射。 客户端路由结构用于处理hashchange事件,以便您可以使用它为某些页面提供类似于应用程序的function。 有关详细信息,请参阅https://github.com/quirkey/sammy/wiki/Presentations 。
此外,在下面的示例中完成几乎不需要使用普通链接。 你可以使用按钮,li,你想要的任何ajax响应链接,只要你可以绑定到他们的点击事件。 您使用的路由参数可以存储在被点击元素的数据属性中,或者存储在通过点击元素可识别的其他位置,即。 在一个javascript字典对象中。 触发点击事件后,您可以检索必要的路由值并使用html5推送状态,jquery-bbq-push状态,hashbanging等。
概述 history.js和jquery-bbq库用于在触发ajax或页面事件时维护状态。 您可以使用这些库来存储有关浏览器历史记录的信息和/或您操纵URL,以便您可以使用页面上的前进和后退按钮进行ajax调用,选项卡更改,图像浏览,以及您想要将历史记录日志绑定到的任何内容。 两个库都有一些类似的API用于基本用法。
History.js新的history.js库使用pushstate和popstate的html5浏览器标准,如果浏览器不支持html5 pushstate,则回退到hashchange方法。 Pushstate允许您将您的url推送到浏览器栏=更改url而不重新加载页面! 主存储库是https://github.com/browserstate/history.js
要使用它,你(a)包括脚本文件,(b)绑定到’statechange’事件和(c)处理statechange事件和(d)当你wnat时触发statechange事件 – 当你的用户点击等时
注意:每当用户按下向前或向后按钮时,状态改变事件将被触发。 在bind方法/处理程序中,您将调用获取相应状态的方法。 (1)方法/函数History.getState()可用于根据您推入的页面历史记录从服务器获取数据。您可以在State对象中存储任何变量。 通常你想存储一个url。 (0)每当有人点击要跟踪历史记录的(非页面刷新)链接时,您需要填充历史记录状态。
(0)
$("#navbar").on("click","li[data-ajax-link='true']", function(e) { var url = $(this).data('uri'); var target = $(this).data('target'); var title = $(this).data('text'); History.pushState({ url: url, target: target }, title, url); });
(1)
History.Adapter.bind(window, 'statechange', function() { updateContent(History.getState()); });
(2)
var updateContent = function(State) { var url = State.data.url; var $target = $(State.data.target); ajaxPost(url, $target); };
BBQ
本阿尔曼的图书馆即。 jquery-bbq.js使用哈希来控制浏览器历史记录。 它完全符合旧版浏览器(因为hashchange就像一个html4技术)。
如果您决定更改链接的默认行为,当您单击链接时,(4)您可以拦截链接回发,阻止默认操作,并调用$ .bbq.pushstate。 此pushstate方法在哈希标记之后将项目内部推入URL。 (5)更改url哈希值,调用绑定到的“hashchange”事件。 (5续)在hashchange事件中,你可以使用$ .bbq.getState(“paramname”)在哈希之后获得带有“paramname”的lastet paremeter。 这很有用,因为浏览器会处理正常历史记录中的哈希值。 因此,当sombody向前或向后点击时,它会加载上一个或下一个哈希状态。 如果您使用它来使您的应用程序大量使用ajax,那么您将执行ajax回发以获取先前放入哈希的url。 有关如何使用它的另一个例子,请查看我最近对JQuery BBQ的回答:存储URL的位置?
烧烤历史样本用法
(4)
$("a[data-custom-ajax-link='true']").click(function (e) { var target = $(this).data('target'); var url = $(this).attr('href'); $.bbq.pushState({ url: url, target: target }); e.preventDefault(); });
(5)
$(window).bind("hashchange", function(e) { var url = $.bbq.getState("url"); var $target = $($.bbq.getState("target")); var frame = $.bbq.getState("target"); $.ajax({ url: url, data : null, type: "POST", beforeSend: function (xhr) { xhr.setRequestHeader('X-Target', frame); }, success: function (data) { $target.html(data); } }); });
请注意,我刚刚介绍了如何使用这些插件的基础知识。 您可以使用这些插件来管理使用标签,链接或ajax加载的前进和后退按钮的使用。
至于哪一个’更好’,很难说。 History.js将在〜。5年内完全成熟时成为更好的库(它仍然处于测试阶段,但它对未来是一个不错的选择,请注意其github网站上的大量未解决的问题和分支)。 Jquery-bbq是其3年前的另一方面,并且尚未针对jquery 1.9合规性进行更新。 好消息是它们具有非常相似的实现和function,因此在两者之间切换也不错。
History.js更具未来兼容性。 看看它的API(大约在https://github.com/browserstate/history.js的一半
为了比较,bbq的API位于页面http://benalman.com/code/projects/jquery-bbq/docs/files/jquery-ba-bbq-js.html 。 除了历史部分之外,还有更多内容。
您无法覆盖浏览器的后退和前进按钮,出于安全原因,这是设计在每个浏览器中。
所有这些脚本都会更改浏览器的document.location或document.hash,然后跟踪浏览器后退或前进按钮的使用时间并获取浏览器的当前哈希状态。
不要误解我的意思,它们是很好的脚本,但它们不允许你完全覆盖你的后退和前进按钮。