使用history.replaceState 修改url 不跳转

history.replaceState(null,null,this.urlR);  //关键代码

history.replaceState是将指定的URL替换当前的URL

注意：用于替换掉的URL必须是同域的

示例:

先保存三个页面

goto1.html

 

[html] view plain copy
 
  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

 

[html] view plain copy
 
  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


 


 






[html] view plain copy

 






    

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





 








 


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


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


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


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


 


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


 






[javascript] view plain copy

 






    

  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. }  
    13. 

  13. 







		

		
posted @ 
2017-08-24 15:05 
luckylou 
阅读(2068) 
评论(0) 
编辑 
收藏 
举报