Javascript 修改地址栏

在现代Web开发中，动态修改页面地址栏已成为常见需求。比如，当一个页面滚动到底部时，我们可能需要在地址栏上添加“?page=2”的参数值。此时我们就需要借助Javascript来实现这个功能。

可以使用window.history.pushState方法来动态修改地址栏。该方法有三个参数：

window.history.pushState(state, title, url);

其中，state参数是一个对象，与新的历史记录条目相关联；title参数暂时没有用，可以传入null；url参数是想要显示在地址栏上的新URL。

举个例子，假如我们有一个商品列表页，它包含10个商品，每页展示2个，那么我们就可以使用以下代码来动态修改地址栏：

function changeUrl(pageNum) {
var url = window.location.protocol + "//" + window.location.host + window.location.pathname + "?page=" + pageNum;
window.history.pushState(null, null, url);
}

这个函数会将当前URL的协议和域名部分与路径名以及新增的参数拼接后，传入pushState方法，然后刷新地址栏。

需要注意的是，当地址栏中出现新的参数时，浏览器不会自动刷新页面，也不会向服务器发送请求。因此，我们需要使用onpopstate事件来监听地址栏的变化。

onpopstate事件会在用户点击浏览器的 后退/前进 按钮时触发。在onpopstate事件的回调函数中，可以调用ajax等技术向服务器请求新数据并更新页面内容。

以下是一个完整的例子：

// 第一次加载页面时，渲染第一页商品
var pageNum = 1;
loadGoods(pageNum);
// 监听地址栏的变化
window.addEventListener("popstate", function() {
pageNum = getUrlParam("page") || 1;
loadGoods(pageNum);
});
// 点击翻页按钮时，动态修改地址栏
function changePage(pageNum) {
changeUrl(pageNum);
loadGoods(pageNum);
}
// 根据参数名从URL中获取参数值
function getUrlParam(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]);
return null;
}

在这个例子中，我们通过onpopstate事件监听地址栏，然后动态加载对应页码的商品数据，并更新页面内容。

总之，在需要动态修改地址栏的场景中，可以使用window.history.pushState方法来实现。同时，需要使用onpopstate事件监听地址栏的变化，以便及时更新页面内容。