首页 > HTML > 有没有办法在不重新加载页面的情况下修改当前页面的 URL?

有没有办法在不重新加载页面的情况下修改当前页面的 URL?

上一篇 下一篇

有没有办法在不重新加载页面的情况下修改当前页面的 URL?

如果可能的话,我想访问#哈希之前的部分。

我只需要更改域后面的部分,因此我不会违反跨域策略。

 window.location.href = "www.mysite.com/page2.php";  // this reloads

分割线

网友回答:

HTML5引入了and方法,它允许您分别添加和修改历史记录条目。history.pushState()history.replaceState()

window.history.pushState('page2', 'Title', '/page2.php');

从这里阅读更多关于这个的信息

分割线

网友回答:

这现在可以在Chrome,Safari,Firefox 4+和Internet Explorer 10pp4+中完成!

有关详细信息,请参阅此问题的答案:
使用新 URL 更新地址栏而不进行哈希处理或重新加载页面

例:

 function processAjaxData(response, urlPath){
     document.getElementById("content").innerHTML = response.html;
     document.title = response.pageTitle;
     window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", urlPath);
 }

然后,您可以使用 检测后退/前进按钮导航:window.onpopstate

window.onpopstate = function(e){
    if(e.state){
        document.getElementById("content").innerHTML = e.state.html;
        document.title = e.state.pageTitle;
    }
};

有关操作浏览器历史记录的更深入了解,请参阅这篇 MDN 文章。

分割线

网友回答:

如果您想更改 url 但不想将条目添加到浏览器历史记录中,也可以使用 HTML5 replaceState

if (window.history.replaceState) {
   //prevents browser from storing history with each change:
   window.history.replaceState(statedata, title, url);
}

这将“破坏”后退按钮功能。在某些情况下可能需要这样做,例如图像库(您希望后退按钮返回到库索引页面,而不是在查看的每个图像中向后移动),同时为每个图像提供自己唯一的 URL。

模板简介:该模板名称为【有没有办法在不重新加载页面的情况下修改当前页面的 URL?】,大小是暂无信息,文档格式为.编程语言,推荐使用Sublime/Dreamweaver/HBuilder打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【HTML】栏目查找您需要的精美模板。

相关搜索
  • 下载密码 lanrenmb
  • 下载次数 246次
  • 使用软件 Sublime/Dreamweaver/HBuilder
  • 文件格式 编程语言
  • 文件大小 暂无信息
  • 上传时间 03-10
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
微信文章 微信模板 企业网站 微信图片 单页式简历模板 响应式 微信公众平台 html5 自适应 微信素材
您可能会喜欢的其他模板