我怎样才能改变页面的URL而无需刷新页面？ [英] How can I change the page URL without refreshing the page?
问题描述
我要如何改变URL而无需刷新页面？
How do I change the URL without refreshing the page?
我已经建立了与codeIginer一个网站，我想实现AJAX和jQuery在我的网页之一。问题是;当我加载的内容，该URL不会改变。
I've built a website with CodeIginer and I want to implement AJAX and JQuery in one of my pages. The problem is; when I load the content, the URL doesn't change.
让我们说，我有网址 http://www.example.com/controller/function/param
而另一网址： http://www.example.com/controller/function/param2
Let's say that I have the URL http://www.example.com/controller/function/param
And another URL : http://www.example.com/controller/function/param2
我怎样才能改变第一个URL来第二个，当我点击一个按钮？
How can I change the first URL to the second one when I click a button?
推荐答案
在HTML5可以改变网址：
In HTML5 you can change the URL:
window.history.pushState("object or string", "Title", "/new-url");
支票的http://spoiledmilk.com/blog/html5-changing-the-browser-url-without-refreshing-page/
文档：<一href="https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history#The_pushState().c2.a0method" rel="nofollow">https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history#The_pushState().c2.a0method
更新
该浏览器的概述支持新的HTML5历史API：
An overview of which browser support the new HTML5 history API:
http://caniuse.com/#search=pushState （caniuse.com值得书签！）
http://caniuse.com/#search=pushState (caniuse.com is worth to bookmark!)
目前已经有框架，做艰苦的工作，你甚至优雅地退回到普通的哈希标签解决方案：
there are already frameworks that do the hard work for you and even gracefully fallback to the common hash-tag solution:
History.js优雅地支持HTML5历史/国家的API （pushState，replaceState，onPopState）在所有浏览器。包含 数据，标题，replaceState的持续支持。 jQuery的支持， MooTools的和原型。对于HTML5的浏览器，这意味着你可以 直接修改URL，而无需再使用哈希值。对于 HTML4浏览器也将恢复到使用旧onhashchange 功能。
History.js gracefully supports the HTML5 History/State APIs (pushState, replaceState, onPopState) in all browsers. Including continued support for data, titles, replaceState. Supports jQuery, MooTools and Prototype. For HTML5 browsers this means that you can modify the URL directly, without needing to use hashes anymore. For HTML4 browsers it will revert back to using the old onhashchange functionality.
骨干供应结构的JavaScript重应用由 提供与键 - 值模型绑定和自定义事件，收藏 具有丰富的枚举功能，具有声明事件视图API 处理，而这一切连接到现有的应用程序在一个 REST风格的JSON接口。 ... 存在于骨干纯粹选择在基础pushState的支持。 旧的浏览器不支持pushState将继续使用 基于散列的网址的片段，并且如果散列的URL被访问由一个 pushState功能的浏览器，它将被透明升级到真正的URL。
Backbone supplies structure to JavaScript-heavy applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing application over a RESTful JSON interface. ... pushState support exists on a purely opt-in basis in Backbone. Older browsers that don't support pushState will continue to use hash-based URL fragments, and if a hash URL is visited by a pushState-capable browser, it will be transparently upgraded to the true URL.
Mootools (via Plugin)
MooTools是一个紧凑的，模块化的，面向对象的JavaScript设计的中级到高级的JavaScript开发框架。 [...]通过popstate或hashchange历史管理。替换页面的URL没有重装，并回落到Hashchange在老 浏览器。
MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. [...] History Management via popstate or hashchange. Replaces the URL of the page without a reload and falls back to Hashchange on older browsers.
道场节省您的时间和规模与你的发展过程中，使用Web标准 它的平台。这是该工具包有经验的开发转向为建设高 优质的桌面和移动Web应用程序。 [...] dojox.app管理导航 通过HTML5 pushState标准的历史，并将其委托给浏览器中启用 历史记录管理。
Dojo saves you time and scales with your development process, using web standards as its platform. It’s the toolkit experienced developers turn to for building high quality desktop and mobile web applications. [...] dojox.app manage the navigation history through HTML5 pushState standard and delegate it to browser enabled history management.
...只是仅举几例。
... just to name a few.
（!!）注意
一个重要的副作用使用 pushState （引自的骨干文档）：
请注意，使用真实的URL需要你的Web服务器能够 正确地呈现这些网页，所以后端需要更改为 井。例如，如果您有/文件/ 100，您的网络的路由 服务器必须能够以服务的页面上，如果浏览器访问URL 直。对于全搜索引擎爬行，最好能有 服务器生成完整的HTML的网页...但如果它是一个网络 应用程序，只呈现相同的内容，你将不得不为 根URL，并填充在休息与骨干视图和JavaScript 工作得很好。
Note that using real URLs requires your web server to be able to correctly render those pages, so back-end changes are required as well. For example, if you have a route of /documents/100, your web server must be able to serve that page, if the browser visits that URL directly. For full search-engine crawlability, it's best to have the server generate the complete HTML for the page ... but if it's a web application, just rendering the same content you would have for the root URL, and filling in the rest with Backbone Views and JavaScript works fine.
这篇关于我怎样才能改变页面的URL而无需刷新页面？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
