如何修改浏览器地址栏的URL

标签 IT工具网 javascript

原问题:Modify the URL without reloading the page

提问者想要修改浏览器地址栏中显示的URL,同时不发生页面重载。

无论是地址栏的内容,还是是否重载页面,都是浏览器的行为。因此我们需要看浏览器是否支持。

我们知道,浏览器与JavaScript之间的接口是window对象。

来看看window对象的文档:Window - Gecko

目前情况下,该问题只能通过HTML5提供的history接口来完成。

window.history

HTML5中为window对象添加了history对象。正好上月底W3C正式发布了HTML5规范,我们就来看看正式文档:HTML5 - History Interface (HTML5目前仍在持续更新中HTML5 - Draft)。该对象对外暴露了一些属性和方法,让程序员能存取用户浏览记录。

虽然W3C的这个History接口只是在用户浏览历史数据层面上的规范,浏览器可以在实现这些API的时候附加一些自己的动作,比如history.pushState()的时候,直接更新地址栏显示的URL。参见Firefox的MDN文档:Adding and modifying history entries

它对history.pushState()的说明就是:

This will cause the URL bar to display http://mozilla.org/bar.html, but won’t cause the browser to load bar.html or even check that bar.html exists.

因此,对于提问者的需求,在最新的Chrome/Safari/Firefox/IE下,使用history.pushState()方法即可实现。

var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");

不支持HTML5的浏览器

无法实现。

地址栏显示的URL是document.location属性。没有修改地址栏内容的API,只能通过给document.location赋值的方式,而该赋值动作会导致页面重载。

相关文章:

javascript - Jquery ajax - 无法在文本框中设置新值 - 模式

javascript - React - 数组中的每个 child .. 独特的 "key" Prop 警告

php - 如何在用户使用 Jquery 输入期间的明显暂停处启动 AJAX 请求?

JSON内容的HTTP Header该怎么填?

java - serialVersionUID 有什么作用?该如何使用?

JavaScript代码结构的最佳实践BP

javascript - d3js onmouseover 突出显示不起作用

javascript - 如何使用jquery或javascript设置innerhtml与选定的下拉选项文本?

远程办公工具大合集

event.preventDefault() VS return false