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. 2011年浙大:Twin Prime Conjecture
			
    Twin Prime Conjecture Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Ot ...
    
			
    2. 
						
  2. noip2011普及组:统计单词
			
    题目描述 一般的文本编辑器都有查找单词的功能,该功能可以快速定位特定单词在文章中的位 置,有的还能统计出特定单词在文章中出现的次数. 现在,请你编程实现这一功能,具体要求是:给定一个单词,请你输出它在 ...
    
			
    3. 
						
  3. PPI协议详解 ppi通讯协议 ppi通信协议 vb与ppi协议通讯
			
    转自:http://blog.csdn.net/vbvcde/article/details/7660497 我们提供 PPI协议的官方文档,协议更新时间为2005年,下面是我们根据文档解析的PPI读 ...
    
			
    4. 
						
  4. session和cookie(2)
			
    会话(Session)跟踪是Web程序中常用的技术,用来跟踪用户的整个会话.常用的会话跟踪技术是Cookie与Session.Cookie通过在客户端记录信息确定用户身份,Session通过在服务器端 ...
    
			
    5. 
						
  5. Java的Socket通信（多线程）(1)
			
    如图: 思路: ①首先创建服务器端Socket,指定并侦听某一个端口,然后循环监听开始等待客户端的连接…. ②创建客户端socket,指定服务器地址和端口,然后获取输出流,向服务器端发送请求,并关闭s ...
    
			
    6. 
						
  6. pkg_resources----Entry Points为程序提供扩展点
			
    官方文档对Entry Points的介绍 Entry Points Entry points are a simple way for distributions to "advertise ...
    
			
    7. 
						
  7. 34.Docker安装Mysql参数及环境变量使用
			
    容器安装好后,通过exec进去到容器的内部, 容器安装的时候两种容器配置参数 直接在镜像的后面加配置 第二种方式 把这段代码拷贝过来.参数我们可以写在镜像的后面 我们把参数写在镜像的后面 然后我们需要 ...
    
			
    8. 
						
  8. Android开发，关于aar你应该知道的
			
    https://yangbo.tech/2015/10/17/all-about-aar/ 背景 在软件工程中,分治是最基本的设计原理,就如同现实中的砖.瓦.钢筋.水泥一样,模块化.组件化的分工,让我 ...
    
			
    9. 
						
  9. hiho week 136（二分＋优先队列）
			
    题目链接:http://hihocoder.com/contest/hiho136/problem/1 题意:中文题诶- 思路:直接对缓存区长度二分就好了,注意计算当前长度的"延迟惩罚值&q ...
    
			
    10. 
						
  10. python的编码问题整理
			
    一.编码和解码 1.编码(encode):将人类可以识别的语言(英文.中文等)转化成机器语言(01串)的过程,用于存储. 2.解码(decode):将机器语言转化成人类可识别的语言的过程,用于显示.  ...
    
			
    11.