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. BZOJ3938：Robot
			
    浅谈标记永久化:https://www.cnblogs.com/AKMer/p/10137227.html 题目传送门:https://www.lydsy.com/JudgeOnline/proble ...
    
			
    2. 
						
  2. Nuget：template
			
    ylbtech-Nuget: 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部     6.返回顶部   作者:ylbtech出处:http://ylbtech.c ...
    
			
    3. 
						
  3. C# FileStream 按大小分段读取文本内容
			
    该例子首先在C盘根目录创建一个名为'file1.txt'的文本文件. 然后再运行该例子.. 完整代码如下: 引入命名空间: [csharp] view plain copy print? using  ...
    
			
    4. 
						
  4. git base cli
			
    
			
    5. 
						
  5. Pseudo Random Nubmer Sampling
			
    Pseudo Random Nubmer Sampling https://en.wikipedia.org/wiki/Inverse\_transform\_sampling given a dis ...
    
			
    6. 
						
  6. WSAStartup（）函数的使用
			
    int WSAStartup( __in WORD wVersionRequested, __out LPWSADATA lpWSAData ); WSAStartup 格  式: int PASCA ...
    
			
    7. 
						
  7. pandas基础(2)_多重索引
			
    1:多重索引的构造 >>> #下面显示构造pd.MultiIndex >>> df1=DataFrame(np.random.randint(0,150,size= ...
    
			
    8. 
						
  8. POJ2549【hash分离链接法】
			
    题意: 给n个不同的数,求一个4个数(a,b,c,d)的组合满足a+b+c=d;求最大的d. 思路: 没想到可以用hash搞/ 这个就是数据结构里的分离链接法~ 解决hash冲突的方法:将所有关键字为 ...
    
			
    9. 
						
  9. UE4 中的 C++ 编程介绍
			
    https://docs.unrealengine.com/latest/CHN/Programming/Introduction/index.html UE4 中的 C++ 编程介绍 Unreal  ...
    
			
    10. 
						
  10. 关于c语言中的字符串的问题
			
      静态数组,动态数组,链表是c语言中处理存储数据最基本的三种方式. 1.静态数组,你先定好大小,直接赋值即可,不要超过定义的长度. 2.动态分配数组,在执行的时候,输入要分的内存大小,然后p=(vo ...
    
			
    11.