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. bzoj 2259 [Oibh] 新型计算机 —— 最短路
			
    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2259 相邻点之间连边权为1的边,就是水最短路了: 要注意点上的数不能改成负数,但是想一想改成 ...
    
			
    2. 
						
  2. C# 获取Console的输入和输出 数据 （异步）
			
    using System ; using System .Diagnostics; using System .IO;   class Program {     static void Main() ...
    
			
    3. 
						
  3. Code：Base64 编码/解码
			
    ylbtech-Code:Base64 编码/解码 1. C#返回顶部 1.编码 byte[] inArray = new byte[msgTxt.Length]; int x; ; x < m ...
    
			
    4. 
						
  4. 用于获取或设置Web.config/*.exe.config中节点数据的辅助类
			
    1. 用于获取或设置Web.config/*.exe.config中节点数据的辅助类 /**//// <summary> /// 用于获取或设置Web.config/*.exe.confi ...
    
			
    5. 
						
  5. 在浏览器端用JS创建和下载文件
			
    前端很多项目中,都有文件下载的需求,特别是JS生成文件内容,然后让浏览器执行下载操作(例如在线图片编辑.在线代码编辑.iPresst等). 但受限于浏览器,很多情况下我们都只能给出个链接,让用户点击打 ...
    
			
    6. 
						
  6. 6、scala面向对象-对象
			
    一.对象 1.object object,相当于class的单个实例,通常在里面放一些静态的field或者method,第一次调用object的方法时,就会执行object的constructor,  ...
    
			
    7. 
						
  7. Ubuntu中的minicom
			
    需要更新一下软件源: sudo apt-get update 安装 在终端中输入sudo apt-get install minicom 配置 输入sudo minicom -s,注意前边一定要加su ...
    
			
    8. 
						
  8. js用"."和"[]"获取属性的区别
			
    在JavaScript中通常使用”."运算符来存取对象的属性的值.或者使用[]作为一个关联数组来存取对象的属性. 对象的属性和方法统称为对象的成员. 访问对象的属性 在JavaScript中 ...
    
			
    9. 
						
  9. exporting
			
    exporting: { buttons: { contextButton: { menuItems: [{ text: '导出png图片 100宽度', onclick: function () { ...
    
			
    10. 
						
  10. Linux运用一些常用命令
			
    今天搜集整理了一些Linux服务器运维常用命令,希望对大家有帮助:1.删除0字节文件 find -type f -size 0 -exec rm -rf {} 2.查看进程按内存从大到小排列 ps - ...
    
			
    11.