history.replaceState(null,null,this.urlR);  //关键代码

history.replaceState是将指定的URL替换当前的URL

注意：用于替换掉的URL必须是同域的

示例:

先保存三个页面

goto1.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>goto1</title>
  6. </head>
  7. <body>
  8. <h1>这是goto1</h1>
  9. <a href='goto2.html'>去2</a>
  10. </body>
  11. </html>

goto2.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>goto2</title>
  6. </head>
  7. <body>
  8. <h1>这是goto2</h1>
  9. <a href='goto3.html'>去3</a>
  10. </body>
  11. <script>
  12. history.replaceState({}, "goto1", "goto1.html");//将该页面的url替换为goto1.html,而不刷新页面
  13. </script>
  14. </body>
  15. </html>






goto3.html




  1. <pre name="code" class="html"><!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

  4. <meta charset="UTF-8">
    5. 

  5. <title>goto3</title>
    6. 

  6. </head>
    7. 

  7. <body>
    8. 

  8. <h1>这是goto3</h1>
    9. 

  9. </body>
    10. 

  10. </html>












先从goto1点击链接进入goto2，goto2点链接进入goto3;


此时点击浏览器的后退键应该返回到goto2，然而由于我们已经用


history.replaceState({}, "goto1", "goto1.html");将goto2的url历史记录换成goto1；


所有从goto3点击后退直接返回到了goto1页面；这里的goto1也可以换成所有你想要用户返回的页面


奉上个人封装的一个控制返回小函数




  1. var url='goto1';
    2. 

  2. var param=new Object();
    3. 

  3. param.userid='123';
    4. 

  4. param.status='1';//最后得到path=goto1.html?userid=123&status=1 ;
    5. 

  5. function changeBackUrl(url,param){  //url表示链接地址
    6. 

  6. if(typeof(param)=='object'){
    7. 

  7. param=JSON.stringify(param).replace(/\{|\}|\"|\'/g,'').replace(',','&').replace(/:/g,'=');
    8. 

  8. }else{
    9. 

  9. try{ param=param.toString().replace(',','&').replace(/:/g,'=').replace(/\"|\'/g,''); }catch(e){''}
    10. 

  10. }
    11. 

  11. var path=+url+".html?"+param; history.replaceState(null, null, path);
    12. 

  12. }


												


											
使用history.replaceState 修改url 不跳转的更多相关文章
	

    
								
  1. 不刷新网页修改url链接：history.pushState()和history.replaceState()新增、修改历史记录用法介绍
		
    最近遇到了在不刷新页面的情况下修改浏览器url链接的需求,考虑到可以通过history.pushState()解决.现在将我理解的一些内容分享一下,不对的地方欢迎大家指出. 在使用方法前首先需要了解它 ...
    
		
    2. 
						
  2. HTML5无刷新修改Url,history pushState/replaceState
		
    一.认识window.history window.history表示window对象的历史记录,是由用户主动产生,并且接受javascript脚本控制的全局对象.window对象通过history对 ...
    
		
    3. 
						
  3. 不跳转修改url（history.pushState)
		
    有时候我们会想不跳转的情况下修改url 直接上代码吧: history.pushState(null,"","?test=123") 值得注意的是,为了用户安全 ...
    
		
    4. 
						
  4. HTML5 history.pushState()和history.replaceState()新增、修改历史记录用法介绍
		
    抽空研究了下这两个新方法,确实可以解决很多问题 1.使用pushState()方法 可以控制浏览器自带的返回按钮: 有时候我们想让用户点击浏览器返回按钮时,不返回,或执行其他操作,这时,就用到hist ...
    
		
    5. 
						
  5. Html5使用history对象history.pushState()和history.replaceState()方法添加和修改浏览历史记录
		
    根据网上参考自己做个笔记:参考网址:http://javascript.ruanyifeng.com/bom/history.html history.pushState() HTML5为histor ...
    
		
    6. 
						
  6. HTML5新api即pushState和replaceState实现无刷新修改url
		
    1,首先我面临一个需求,页面回退时需要知道来之前的页面状态.很简单,回退时在url里赋参数即可.问题是在ipad上,回退按钮是安卓那边的,我控制不了.只好采用js无刷新修改url历史记录,来告诉服务器 ...
    
		
    7. 
						
  7. 静态修改url，不跳转
		
    history.replaceState(null,document.title,'www.baidu.com');
    
		
    8. 
						
  8. history.pushState()和history.replaceState()
		
    Html5 新增history对象的两个方法:history.pushState()和history.replaceState(),方法执行后,浏览器地址栏会变成你传的url,而页面并不会重新载入或跳 ...
    
		
    9. 
						
  9. HTML5实现无刷新修改URL
		
    前言 今天在做一个vue的搜索功能,需要从搜索结果页面跳转到细节页面,然后点击返回还能返回到刚刚的结果页面,如果只用window.history.go(-1)当然会重新刷新搜索页面,当然是不行的. 我 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Hibernate 的HQL和sql有什么区别
			
    转自:https://blog.csdn.net/haozhugogo/article/details/54575802sql 面向数据库表查询 hql 面向对象查询 hql : from 后面跟的  ...
    
			
    2. 
						
  2. Nginx的一些优化(突破十万并发)
			
    Nginx的一些优化(突破十万并发) nginx指令中的优化(配置文件) worker_processes 8; nginx进程数,建议按照cpu数目来指定,一般为它的倍数. worker_cpu_a ...
    
			
    3. 
						
  3. Linux&nbsp;JDK1.4卸载与1.6的安装
			
    Linux JDK卸载与安装 一.jdk1.4卸载 Redhat Enterprise 5 中自带安装了jdk1.4,在安装jdk1.6前,把jdk1.4卸载: 1.首先查看系统自带JDK的版本: [ ...
    
			
    4. 
						
  4. VMware10中安装centos7没有可用的网络设备
			
    1.问题描述 centos7安装到虚拟机无法上网   2.安装环境 win7 x64  WM 10.01 iso  CentOS-7-x86_64-DVD-1503-01.iso  {4.01G}   ...
    
			
    5. 
						
  5. 关于JSP页面中的pageEncoding和contentType两种属性的区别
			
    转自:http://blog.csdn.net/dragon4s/article/details/6604624 JSP指令标签中<%@ page contentType="text/ ...
    
			
    6. 
						
  6. 在UI程序设计中使用BackgroundWorker进行多线程异步处
			
    WinForm的应用程序中如果执行了一个的非常冗长的处理操作,(比如文件检索,大运算量计算),在执行时就会锁定用户界面,虽然主活动窗口还在运行,但用户无法与程序交互,无法移动窗体或改变窗体大小,导致程 ...
    
			
    7. 
						
  7. pandas基础(2)_多重索引
			
    1:多重索引的构造 >>> #下面显示构造pd.MultiIndex >>> df1=DataFrame(np.random.randint(0,150,size= ...
    
			
    8. 
						
  8. python-根据URL地址下载文件
			
    博主个人网站:https://chenzhen.online 使用Python中提供的urllib.request下载网上的文件 #coding=utf-8 """ 目标 ...
    
			
    9. 
						
  9. vue、React Nactive的区别（转载）
			
    Vue与React的对比 Vue.js与React.js从某些反面来说很相似,通过两个框架的学习,有时候对一些用法会有一点思考,为加深学习的思索,特翻阅了两个文档,从以下各方面进行了对比,加深了对这两 ...
    
			
    10. 
						
  10. IT兄弟连 JavaWeb教程 使用AJAX发送GET请求并获取响应
			
    GET请求用于获取数据,有时候我们需要获取的数据需要通过"查询参数"进行定位,在这种情况下,我们会将查询参数追加到URL的末尾,令服务器解析. 使用Ajax发送GET请求非常简单, ...
    
			
    11.