zoukankan      html  css  js  c++  java

  • 使用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. 

    

    

    
    
                
    
                
              
    • 
              
    
              
  • 

                相关阅读:
    
                
                  HDU 1059 Dividing（多重背包）
                    
    新华网，要厚道
                    
    js与DOM初步：访问html元素
                    
    Hacker News网站的文章排名算法工作原理
                    
    做技术，是个精益求精的事情
                    
    百度贴吧客户端(Android)网络通信行为分析
                    
    Storm同时接收多个源(spout和bolt)
                    
    各种流处理系统的比较
                    
    Kafka学习
                    
    关联规则推荐及Apriori算法
                    
                        
              
    • 
              
    
              
  • 
                原文地址：https://www.cnblogs.com/qiao20/p/7423157.html
              
    • 

            

          



          
          

            

            

          

        

      

      



      

      

        

          Copyright © 2011-2022 走看看