在AJAX调用上更新URL?

20 ajax jquery url-rewriting

现在我使用AJAX的最大问题是如果我在页面上使用AJAX,转到另一个页面,然后使用浏览器的后退按钮返回用AJAX更改的任何内容.

我已经考虑过使用jQuery Addresss插件来解决这个问题,但我不喜欢它只是用"#whatever.html"修改URL而不是完全改变它.

理想情况下,当我进行相关的AJAX调用时,我希望将URL从"www.example.com/p:2/"改为"www.example.com/p:3/".

这是可能吗?

Sol*_*ogi 20

不,这是不可能的.更新:现在可以通过HTML5 History API查看razbakov的答案.

我希望你意识到你正试图解决一个极其困难的问题.

让我们说你的网址看起来像

http://example.com/mypage/
Run Code Online (Sandbox Code Playgroud)

如果以编程方式将窗口位置更改为

http://example/mypage/1/
Run Code Online (Sandbox Code Playgroud)

浏览器将接管并尝试导航到该页面,那里有你喜欢的ajax代码!

那么替代方案是什么?您使用URL片段.

假设您有这样的网址,

http://example.com/anotherpage/#section
Run Code Online (Sandbox Code Playgroud)

浏览器将首先加载http://example.com/anotherpage/并尝试查找名为"section"的锚点并滚动到该位置."地址"插件利用了这种行为.这与"滚动到顶部"链接的工作方式类似.

所以,如果你在页面上

http://example.com/mypage/
Run Code Online (Sandbox Code Playgroud)

并将URL更改为

http://example.com/mypage/#1
Run Code Online (Sandbox Code Playgroud)

浏览器不会加载新页面,而是尝试查找名为"1"的锚点并滚动到该锚点.

即使您已设法将片段添加到URL,也不意味着工作已完成.如果用户按下后退按钮,DOM将被重置,您将不得不解析这些片段并重新创建DOM.这绝对不是一件轻而易举的事.


Ale*_*kov 20

HTML5可以实现.您可以测试示例GitHub或Vkontakte站点.

最好的答案是:在浏览器中更改URL而不使用JavaScript加载新页面

它表示您可以将history.pushState函数用于这些目的.但是此解决方案仅适用于HTML5兼容浏览器.否则你需要使用hash-method.


v4r*_*v4r 5

使用history.js可以解决此问题.https://github.com/browserstate/history.js