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>
  1.  
  1.  
  1.  

goto3.html

  1. <pre name="code" class="html"><!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>goto3</title>
  6. </head>
  7. <body>
  8. <h1>这是goto3</h1>
  9. </body>
  10. </html>
  1.  
  1.  
  1.  
  1.  

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

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

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

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

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

  1. var url='goto1';
  2. var param=new Object();
  3. param.userid='123';
  4. param.status='1';//最后得到path=goto1.html?userid=123&status=1 ;
  5. function changeBackUrl(url,param){  //url表示链接地址
  6. if(typeof(param)=='object'){
  7. param=JSON.stringify(param).replace(/\{|\}|\"|\'/g,'').replace(',','&').replace(/:/g,'=');
  8. }else{
  9. try{ param=param.toString().replace(',','&').replace(/:/g,'=').replace(/\"|\'/g,''); }catch(e){''}
  10. }
  11. var path=+url+".html?"+param; history.replaceState(null, null, path);
  12. }

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

  1. 不刷新网页修改url链接：history.pushState()和history.replaceState()新增、修改历史记录用法介绍

    最近遇到了在不刷新页面的情况下修改浏览器url链接的需求,考虑到可以通过history.pushState()解决.现在将我理解的一些内容分享一下,不对的地方欢迎大家指出. 在使用方法前首先需要了解它 ...

  2. HTML5无刷新修改Url,history pushState/replaceState

    一.认识window.history window.history表示window对象的历史记录,是由用户主动产生,并且接受javascript脚本控制的全局对象.window对象通过history对 ...

  3. 不跳转修改url（history.pushState)

    有时候我们会想不跳转的情况下修改url 直接上代码吧: history.pushState(null,"","?test=123") 值得注意的是,为了用户安全 ...

  4. HTML5 history.pushState()和history.replaceState()新增、修改历史记录用法介绍

    抽空研究了下这两个新方法,确实可以解决很多问题 1.使用pushState()方法 可以控制浏览器自带的返回按钮: 有时候我们想让用户点击浏览器返回按钮时,不返回,或执行其他操作,这时,就用到hist ...

  5. Html5使用history对象history.pushState()和history.replaceState()方法添加和修改浏览历史记录

    根据网上参考自己做个笔记:参考网址:http://javascript.ruanyifeng.com/bom/history.html history.pushState() HTML5为histor ...

  6. HTML5新api即pushState和replaceState实现无刷新修改url

    1,首先我面临一个需求,页面回退时需要知道来之前的页面状态.很简单,回退时在url里赋参数即可.问题是在ipad上,回退按钮是安卓那边的,我控制不了.只好采用js无刷新修改url历史记录,来告诉服务器 ...

  7. 静态修改url，不跳转

    history.replaceState(null,document.title,'www.baidu.com');

  8. history.pushState()和history.replaceState()

    Html5 新增history对象的两个方法:history.pushState()和history.replaceState(),方法执行后,浏览器地址栏会变成你传的url,而页面并不会重新载入或跳 ...

  9. HTML5实现无刷新修改URL

    前言 今天在做一个vue的搜索功能,需要从搜索结果页面跳转到细节页面,然后点击返回还能返回到刚刚的结果页面,如果只用window.history.go(-1)当然会重新刷新搜索页面,当然是不行的. 我 ...

随机推荐

  1. XAML 编码规范 （思考）

    1.尽量和Blend统一 2.兄弟元素之间需要空行 4.父子元素之间不需要空格 3.每行尽量单个属性 5.Grid的Row和Column定义不需要空行 6.Style里的Setter中不需要单行一个属 ...

  2. c++常用函数STL

    完c++快一年了,感觉很有遗憾,因为一直没有感觉到c++的强大之处,当时最大的感觉就是这个东西的输入输出比C语言要简单好写. 后来我发现了qt,opencv,opengl,原来,c++好玩的狠. 在这 ...

  3. JavaScript高级程序设计学习笔记第十一章--DOM扩展

    1.对 DOM 的两个主要的扩展是 Selectors API(选择符 API)和 HTML5 2.Selectors API Level 1 的核心是两个方法: querySelector()和 q ...

  4. POJ-2229

    Sumsets Time Limit: 2000MS   Memory Limit: 200000K Total Submissions: 19599   Accepted: 7651 Descrip ...

  5. Linux打开防火墙telnet端口

    检查端口情况:netstat -an | grep 22 关闭端口号:iptables -A INPUT -p tcp --drop 端口号-j DROP                    ipt ...

  6. Fran&ccedil;ois&nbsp;Hollande’s&amp;…

    EVER since President François Hollande was elected last May, things have not gone right for him. He ...

  7. TypeScript完全解读(26课时)_汇总贴

    ECMAScript 6 入门:http://es6.ruanyifeng.com/ 官网:http://www.typescriptlang.org/ 中文网:https://www.tslang. ...

  8. Updatepanel 中使用 Timer 控件 失去焦点问题

    在Update Panel 中 如果使用timer 定时刷新数据,会造成textbox 或者其他控件的焦点丢失问题. 所以 text box 不能和timer 放在同一个Updatepanel 中. ...

  9. java.lang.IllegalStateException: Cannot get a STRING value from a NUMERIC cell

    异常 在使用POI读取Excel文件内容时,发生了异常,报错如下: 大概意思是不能从一个数值的列获取一个字符串类型的值,我使用下面的代码来获取单元格的值: //此处省略N行代码 String cell ...

  10. Unity5.5 Lighting Scene

    参考:https://docs.unity3d.com/Manual/GlobalIllumination.html Environment Lighting(环境光) Skybox: 天空盒材质,这 ...