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

How can I change the URI without refreshing the page?

本文关键字：情况下 URI 刷新      更新时间：2023-09-26

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

假设我有这些URI:

  • http://www.example.com/controller/function/param
  • http://www.example.com/controller/function/param2

单击按钮时，如何从第一个更改为第二个？

在HTML5中，您可以更改URL:

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.a0方法

更新

概述哪些浏览器支持新的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

Backbone通过为模型提供键值绑定和自定义事件、集合具有丰富的可枚举函数API，具有声明性事件的视图处理，并通过RESTful JSON接口。。。。pushState支持存在于Backbone中的纯选择加入基础上。不支持pushState的旧浏览器将继续使用基于哈希的URL片段，并且如果具有pushState功能的浏览器，它将透明地升级为真正的URL。

Mootools（通过插件）

MooTools是一个紧凑、模块化、面向对象的JavaScript框架，专为中级到高级JavaScript开发人员设计。[…]通过popstate或hashchange进行历史记录管理。在不重新加载的情况下替换页面的URL，并返回到旧版本上的Hashchange浏览器。

dojo工具包

Dojo使用web标准作为其平台。这是经验丰富的开发人员用来构建高层建筑的工具包高质量的桌面和移动web应用程序。[…]dojox.app管理导航通过HTML5 pushState标准的历史记录，并将其委托给启用浏览器历史管理。

仅举几个例子。

（！！）小心

使用pushState时的一个重要副作用（引用自主干文档）：

请注意，使用真实的URL需要您的web服务器能够正确呈现这些页面，因此需要对后端进行更改好例如，如果您的路由为/documents/100，则您的web如果浏览器访问该URL，服务器必须能够为该页面提供服务直接地对于完整的搜索引擎可爬网性，最好具有服务器为页面生成完整的HTML。。。但是如果是一个网络应用程序，只是呈现与根URL，并用主干视图和JavaScript填充其余部分工作良好。

可以使用哈希（#），然后放任何你喜欢的东西。

这是我用这个创建的一个网站，然后我让JavaScript读取哈希并调用适当的函数：

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

旁注：

这对于flash网站或flash内容也很有用；您可以使用FlashVars将哈希值解析到SWF，并在此基础上加载适当的部分/屏幕。

通过Javascript使用哈希标记，因此在按钮的点击事件处理程序中：location.hash = "param2"这将改变http://example.com/mypage/#whatever到http://example.com/mypage/#param2

当然，你也可以把你的"文件夹"放在散列之后，所以，用一个http://example.com/然后添加：location.hash = "/MyPage/MySubPage/MyInfo";将其更改为http://example.com/#/MyPage/MySubPage/MyInfo

类似的线程推断出no，除非使用哈希标记。

有人提出了一个想法，但强烈反对使用204HTTP响应。

来自W3:

无响应204

服务器已收到请求，但没有要发送回的信息，客户应该保持原样文档视图。这主要是为了输入脚本而不更改文件。

以下是WHATWG的HTML生活标准（以前称为HTML5）的相关摘录，§7.10.2浏览上下文的会话历史：

会话历史记录中的几个连续条目可以共享同一文档。当通过正常导航到达初始条目，并通过history.pushState()添加以下条目时，可能会发生这种情况。或者它可以通过导航到片段来发生。

相关文章：