首页 > 其他分享 >如何修改URL而不重新加载页面?

如何修改URL而不重新加载页面?

时间:2023-10-30 22:33:53浏览次数:31  
标签:URL pageTitle window 加载 response 页面

内容来自 DOC https://q.houxu6.top/?s=如何修改URL而不重新加载页面?

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

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

我只需要更改域名之后的部分,所以它不像是违反了跨域政策。

  window.location.href = "www.mysite.com/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,pageTitle,window,加载,response,页面
From: https://www.cnblogs.com/xiaomandujia/p/17799040.html

相关文章

  • 【Azure Function App】如何修改Azure函数应用的默认页面呢?
    问题描述当在Azure中创建了一个函数应用(FunctionApp)后,访问默认URL会得到一个默认的页面。是否有办法修改这个默认页面呢?  问题解答在之前的博文中,介绍了修改AppService的默认页面。1:【Azure应用服务】AppService默认页面暴露Tomcat版本信息,存在安全风险 :https://www.cnbl......
  • [-005-]-Python3+Unittest+Selenium Web UI自动化测试之页面滑动
    1.上下滑动a.滑动#滑动至页面底部:js1="window.scrollTo(0,document.body.scrollHeight)"self.driver.execute_script(js1)#滑动至页面顶部:js2="window.scrollTo(0,0)"self.driver.execute_script(js2)c.纵向滚动条通过scrollBy坐标来滚动#纵向滚动条通过scr......
  • Element Plus el-tree懒加载默认选中
    百度上试了很多方法,设置default-expanded-keys不生效,最后使用了下面的方法,亲测有效constloadNode=async(node:Node,resolve:(data:AreaType[])=>void)=>{if(node.level===0){const{data}=awaitgetRegionList(areaOptions)if(!props.special)......
  • python 飞书 获取飞书租户访问令牌 自定义机器人 向webhook_url发送POST请求
    importjsonimportrequestswebhook_url=post_data=#见应用凭证#获取飞书租户访问令牌,用于调用飞书开放平台的其他API接口#url:飞书开放平台的获取租户访问令牌的API接口地址url=r"https://open.feishu.cn/open-apis/auth/v3/tenant_access_token/internal/"r=......
  • 图片渐进式加载
    图片渐进式加载一般图片在网页上加载时,可能会因为网速问题,加载缓慢或者突兀出现感觉不协调。常见的解决办法有懒加载和渐进式等等。这里只说渐进式……参考例子//html<divclass="relative"><imageclass="zhanwei"src="占位/压缩图片"></image><imageclass="yuantu":......
  • 短视频app源码,Flutter组件--搜索页面布局
    短视频app源码,Flutter组件--搜索页面布局 classLayoutDemoextendsStatelessWidget{ constLayoutDemo({Key?key}):super(key:key); @override Widgetbuild(BuildContextcontext){  returnPadding(   padding:constEdgeInsets.all(10),   c......
  • 流畅的Flurl.Http[转]
    流畅的Flurl.Http https://flurl.dev/docs/testable-http/注意:除了URL构建和解析之外的所有内容都需要安装Flurl.Http而不是基本的Flurl包。考虑与HTTP服务交互的一种非常常见的方式是“我想构建一个URL,然后调用它”。Flurl.Http允许您非常简洁地表达:usingFlurl;u......
  • 浅析SpringBoot加载配置的6种方式
    从配置文件中获取属性应该是SpringBoot开发中最为常用的功能之一,但就是这么常用的功能,仍然有很多开发者抓狂~今天带大家简单回顾一下这六种的使用方式:说明Environment对象Environment是springboot核心的环境配置接口,它提供了简单的方法来访问应用程序属性,包括系统属......
  • Spring Boot环境下自定义shiro过滤器会过滤所有的url的问题
    问题起因:在Shiro配置类中定义如下:@BeanpublicShiroFilterFactoryBeanshiroFilterFactoryBean(ShiroAuthFiltershiroAuthFilter,SecurityManagersecurityManager){ShiroFilterFactoryBeanfactoryBean=newShiroFilterFactoryBean();Map<String,......
  • UniApp实战技巧:页面导航、数据传递和组件通信,以及资源管理和优化
    UniApp是一个基于Vue.js的开发框架,可以使用它快速构建跨平台的移动应用。本文将介绍UniApp中的一些实战技巧,包括页面导航、数据传递和组件通信。这些技巧可以帮助开发者更好地使用UniApp进行开发。1.页面导航在UniApp中,我们可以使用uni.navigateTo和uni.redirectTo等方法进行页面......