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. C#工程引用dll如何配置
			
    C#工程引用需要注意的事项:  <ItemGroup Condition="&apos;$(Configuration)|$(Platform)&apos; == &a ...
    
			
    2. 
						
  2. JSON 的正确用法：Python、MongoDB、JavaScript与AjaxJSON 的正确用法：Python、MongoDB、JavaScript与Ajax
			
    本文主要总结网站编写以来在传递 JSON 数据方面遇到的一些问题以及目前采用的解决方案.网站数据库采用 MongoDB,后端是 Python,前端采用“半分离”形式的 Riot.js,所谓半分离,是说 ...
    
			
    3. 
						
  3. Linux中的nc测试端口是否开放
			
    nc测试端口是否开放 在Linux中有一个级强大的网络工具netcat,在默认情况下面都是没有安装的,现在介绍一下安装过程 其实安装很简单 一.安装使用 1.只需输入命令yum安装: [root@SZ ...
    
			
    4. 
						
  4. docker 学习（七） docker 容器挂载
			
    1:docker的默认存放位置: $ sudo su # cd /var/lib/docker # ls -F containers/ graph/ repositories volumes/     ...
    
			
    5. 
						
  5. Maven&nbsp;3&nbsp;入门&nbsp;--&nbsp;安装与配置
			
    Maven 3 入门 -- 安装与配置 Maven以及其Eclipse插件m2eclipse的安装 (本文参考了Maven实战) 检查JDK的安装以及环境变量的配置 打开cmd echo %Java_ ...
    
			
    6. 
						
  6. 如何解决WAMP Server 与IIS端口冲突问题
			
    PHP也是一门开发网页的语言,WAMP Server 是它的一个较好的集成开发环境,今日,小编发现好多Wamp Server 安装后启动local host 出现的却是IIS页面!为什么会这样呢? 出 ...
    
			
    7. 
						
  7. DropDownlist数据SelectedIndexChanged触发问题解决
			
    1.设置DropDownlist的AutoPostBack为True 2.绑定DropDownlist数据时出现了重复项, 在载入数据时保存数据状态应该写在Load事件中的if (!IsPostBac ...
    
			
    8. 
						
  8. C++11/14的新特性——更简洁
			
      新的字符串表示方式——原生字符串(Raw String Literals) C/C++中提供了字符串,字符串的转义序列,给输出带来了很多不变,如果需要原生义的时候,需要反转义,比较麻烦. C++提 ...
    
			
    9. 
						
  9. ue4 svn备份目录
			
    http://blog.csdn.net/sh15285118586/article/details/55737480 UE4工程文件备份目录有:Config.Content.Plugins.Sour ...
    
			
    10. 
						
  10. Linux运用一些常用命令
			
    今天搜集整理了一些Linux服务器运维常用命令,希望对大家有帮助:1.删除0字节文件 find -type f -size 0 -exec rm -rf {} 2.查看进程按内存从大到小排列 ps - ...
    
			
    11.