如何在不刷新页面的情况下更改页面URL？

我用CodeIginer构建了一个网站，我想在我的一个页面中实现AJAX和JQuery。问题是;当我加载内容时，URL不会更改。

比方说，我有URL http://www.example.com/controller/function/param
而另一网址：http://www.example.com/controller/function/param2

我怎样才能改变第一URL到第二个，当我点击一个按钮？

2011-05-25 Bobby Stenly

在HTML5中，您可以更改网址：

window.history.pushState("object or string", "Title", "/new-url");

检查http://spoiledmilk.com/blog/html5-changing-the-browser-url-without-refreshing-page/

文档：https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history#The_pushState().c2.a0method

UPDATE

其浏览器SUP概述端口新的HTML5 API历史：

http://caniuse.com/#search=pushState（caniuse.com是值得收藏！）

现在已有做到为你努力工作，甚至优雅地退回到普通哈希标签解决方案框架：

History.js

History.js优雅地支持HTML5历史/国家的API （pushState的，replaceState，onPopState）在所有浏览器。包括继续支持数据，标题，replaceState。支持jQuery， MooTools和原型。对于HTML5浏览器，这意味着您可以直接修改URL，而无需再使用散列。对于 HTML4浏览器，它将恢复使用旧的onhashchange 功能。

Backbone.js

骨干供应结构，以JavaScript的沉重应用程序通过键 - 值绑定和自定义事件，集合提供机型的枚举功能，观点与陈述事件处理了丰富的API ，并通过 RESTful JSON界面将其全部连接到您的现有应用程序。 ... pushState支持存在于Backbone中的纯粹选择性基础上。不支持pushState的老浏览器将继续使用基于散列的URL片段，并且如果有支持pushState的浏览器访问散列URL，它将被透明地升级为真实URL。

Mootools (via Plugin)

MooTools是一个紧凑的，模块化的，面向对象的JavaScript框架设计的中级到高级的JavaScript显影剂。 [...]通过popstate或hashchange进行历史管理。在没有重新加载的情况下替换页面的URL，并在较旧的浏览器上回退到Hashchange。

dojo toolkit

道场节省您的时间和规模与你的发展过程中，使用Web标准作为其平台。这是经验丰富的开发人员转向构建高质量桌面和移动Web应用程序的工具包。 dojox.app通过HTML5 pushState标准管理导航历史记录，并将其委托给启用浏览器的历史管理。

...只是仅举几例。

（!!）注意

一个重要的副作用使用pushState（从Backbone documentation引文）时：

注意，使用真实的URL要求您的网络服务器将能够正确呈现这些页面，因此需要后端更改为好。例如，如果您的路由为/ documents/100，则如果浏览器直接访问该URL ，则您的网络服务器必须能够提供该页面。对于完整的搜索引擎可爬行性，最好让服务器为页面生成完整的HTML ......但如果它是一个web 应用程序，只需呈现与根URL相同的内容，然后填写休息与骨干视图和JavaScript 工作正常。通过Javascript

来源

2011-05-25 01:49:18 roberkules

这是伟大的..感谢您的帮助.. 并感谢所有的人在这个线程中发表评论... :) – 2011-05-25 02:19:32

只要你知道，与我history.pushState的经验，它不会优雅地降级，并且不起作用在IE9中，它实际上打破了我的脚本。请务必实施修复程序，或改为使用document.location.hash。你可以使用modernizer.js来检测浏览器是否支持它。 – mcbeav 2011-05-25 03:41:50

可以使用散列（＃），然后放任何你喜欢的东西。

下面是我用这个建立了一个网站 - 然后我的JavaScript读取哈希并调用相应功能：

http://bannerhouse.com.au/#/popup=media&id=don

旁注：

这是Flash网站或有用Flash内容;您可以使用FlashVars将散列值解析到SWF并基于该值加载适当的部分/屏幕。

来源

2011-05-25 01:46:20 Marty

巧妙的把戏。之前并不知道这一点。 – Pwnna 2011-05-25 01:47:43

谢谢，你拯救了我的生命.. !!! – 2013-08-14 09:47:52

使用哈希标签，所以在按钮的单击事件处理程序： location.hash = "param2" 这将改变http://example.com/mypage/#whatever 到 http://example.com/mypage/#param2

当然，你也可以把你的“文件夹”散后，因此，随着http://example.com/基本URL，你再补充： location.hash = "/MyPage/MySubPage/MyInfo"; 它更改为http://example.com/#/MyPage/MySubPage/MyInfo

来源

2011-05-25 01:49:41

当我试过时，第一个URL'http：// www.example.com/controller/function/param'成了'http://www.example.com/controller/function/param/#/controller/function/ param2'，如果我按下输入的URL，我得到了与第一个URL相同的内容..当我按下URL时，如何将内容更改为第二个？ – 2011-05-25 02:14:51

一similar thread推导出否，除非使用散列标签。

提出了一个想法，但强烈不鼓励使用204 HTTP响应。

从W3：

无响应204

服务器收到请求，但没有返回信息，和客户端应该留在同一个文档视图。这主要是为了允许脚本输入，而不用同时更改文档。

来源

2011-05-25 01:58:00

如何在不刷新页面的情况下更改页面URL？

回答

相关问题