修改地址栏的网址在AJAX应用程序以符合当前国家(Modify Address Bar URL in

2019-07-18 21:07发布

我正在写一个AJAX应用程序,但是随着用户通过移动应用程序,我想尽管缺乏重新加载页面的地址栏中的URL进行更新。 基本上,我希望他们能够书签的任何一点,从而返回到当前状态。

一般人如何处理在AJAX应用程序维护RESTfulness?

Answer 1:

要做到这一点的方法是操纵location.hash当AJAX更新导致,你想有一个不显眼的URL的状态变化。 例如,如果你的页面的网址是:

http://example.com/

如果客户端函数执行该代码:

// AJAX code to display the "foo" state goes here.

location.hash = 'foo';

然后,在浏览器中显示的URL将被更新为:

http://example.com/#foo

这允许用户书签的“富”状态的页面,并使用浏览器的历史状态之间进行导航。

有了这个机制的地方,你就那么需要解析出使用JavaScript来创建并显示相应的初始状态的客户端的URL的哈希部分,作为片段标识符(#在之后的部分)都不会发送到服务器。

本Alman的hashchange插件,如果你使用jQuery让后者变得轻而易举。



Answer 2:

看看像book.cakephp.org网站。 本网站的URL改变不使用哈希和使用AJAX。 我不知道是怎样做的究竟,但我一直在试图弄明白。 如果有人知道,让我知道。

在导航某个项目内看时也github.com。



Answer 3:

这是不可能的作者希望重新加载或使用Ajax时重定向他的客人。 但是,为什么不使用HTML5的pushState / replaceState

你就可以尽可能多地希望修改地址栏。 获得自然的网址,以及AJAX。

退房的代码在我的最新项目: http://iesus.se/



Answer 4:

这是类似于凯文说。 你可以有你的客户端状态,一些JavaScript对象,而当你想要保存的状态,您序列化对象(使用JSON和base64编码)。 然后,您可以在href的片段设置为这个字符串。

var encodedState = base64(json(state));
var newLocation = oldLocationWithoutFragment + "#" + encodedState;

document.location = newLocation; // adds new entry in browser history
document.location.replace(newLocation); // replaces current entry in browser history

第一种方法将把新的状态,新的位置(所以后退按钮会带他们到前面的位置)。 后者没有。



Answer 5:

SWFAddress工作在Flash和Javascript项目,并允许您创建可收藏的URL(使用上述散列法),以及给你后退按钮的支持。

http://www.asual.com/swfaddress/



Answer 6:

该window.location.hash方法是做事的首选方式。 对于如何做到这一点的解释, Ajax模式-唯一URL 。

YUI有这个图案为模块,其中包括IE具体变通用于获取后退按钮与重写使用散列地址一起工作的实现。 YUI浏览器历史记录管理器 。

其他框架也有类似的实现方式为好。 最重要的一点是,如果你想在历史上随着重写地址的工作,不同的浏览器需要处理它不同的方式。 (这是第一链路文章中详细介绍。)

IE需要一个iframe基于黑客,其中Firefox会用同样的方法产生双重的历史。



Answer 7:

如果OP或别人还在寻找一种方式做修改浏览器的历史,以使能状态,使用pushState的和replaceState,通过IESUS的建议,是“正确”的办法现在就这样做。 它已经结束了的location.hash主要优势似乎是,它创造实际的URL,而不是哈希。 如果使用哈希浏览器历史记录保存,然后禁用了javascript重新审视,该应用程序将无法正常工作,因为散列不会被发送到服务器。 然而,如果pushState的已被使用,整条路线将被发送到服务器,然后你就可以建立适当的路线做出回应。 我看到那里同样胡子模板,在服务器和客户端上都使用的例子。 如果客户端启用了JavaScript的,他将避免往返到服务器获取活泼的反应,但应用程序将工作完全正常没有JavaScript的。 因此,应用程序可以适度地降低在不存在的JavaScript。

另外,我相信有一些框架在那里,与像history.js的名称。 对于支持HTML5的浏览器,它使用pushState的,但如果浏览器不支持,它会自动回退到使用哈希值。



Answer 8:

检查用户是否是“中”的页面,当您单击地址栏,JavaScript的说,你出页面上。 如果更改了地址栏,然后按“ENTER”与符号“#”内,那么你进入的页面再次,没有点击页面上的javascript鼠标光标,然后keyboad事件命令(document.onkeypress)手动将能够检查它是否用于重定向进入和积极的JavaScript。 您可以检查用户是否与window.onfocus网页,并检查他是否有window.onblur出去了。

是的,这是可能的。

;)



文章来源: Modify Address Bar URL in AJAX App to Match Current State