微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

history.replaceState 控制返回

分类：HTML作者：极客点儿原文地址AI导航网

转载声明：http://blog.csdn.net/lyh_951128/article/details/50568442


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

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

示例:

先保存三个页面

goto1.html

[html]  view plain  copy
 

在CODE上查看代码片

派生到我的代码片
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. head     Meta charset="UTF-8"     title>goto1</bodyh1>这是goto1a href='goto2.html'>去2ahtml>  

goto2.html

copy

  >      
  • >      
  • >goto2>这是goto2a href='goto3.html'>去3script history.replaceState({}, "goto1", "goto1.html");//将该页面的url替换为goto1.html,而不刷新页面  
  • >   


    •  

     
goto3.html 

     
     

    copy 
   
     
   
     
    
   pre name="code" class="html"><!DOCTYPE html>goto3>这是goto3>  



     

     

     

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

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

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

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

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

     
     

     
   [javascript] 
   copy 
   
     
   
     
    
   
    派生到我的代码片
    
  
     
 
     
 
       var url='goto1';  


    1.  var param=new Object();  

      2. 

    2.  param.userid='123';  

      3. 

    3.  param.status='1';//最后得到path=goto1.html?userid=123&status=1 ;  

      4. 

    4. function changeBackUrl(url,param){  //url表示链接地址  

      5. 

    5.   if(typeof(param)=='object'){   

      6. 

    6.  param=JSON.stringify(param).replace(/\{|\}|\"|\'/g,'').replace(',','&').replace(/:/g,'=');   

      7. 

    7.  }else{   

      8. 

    8. try{ param=param.toString().replace(',','&').replace(/:/g,'=').replace(/\"|\'/g,''); }catch(e){''}   

      9. 

    9.  }   

      10. 

    10. var path=+url+".html?"+param; history.replaceState(null,  }  

      11. 

    

     


    
                
                                 
    版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
    
                            
    
                        
    
                    
    
                
                
    
                    
    
                        
    
                            
    相关推荐
    
                            
    
                                 
    Vue+elementUI 自定义动态数据菜单导航组件实现展开收缩+路由跳转router-view渲染数据 路由跳转到同一个页面带参数ID 自动刷新数据
    
                                
    准备:导入ElementUI 看官网教程 数据准备:JSON数据转换成树状 参考文章: JS实现 JSON扁平数据转换树状数据 后台我拿的数据是这样的格式: [ {id:1 , parentId: 0, name: &#39;&#39;, level: 0}, {id:2 , parentId: 0
    
                  
                                    
                            
    
                                 
    vue阻止冒泡事件 阻止点击事件的执行 结合div和组件阻止点击事件
    
                                
    vue阻止冒泡事件 阻止点击事件的执行 &lt;div @click=&quot;alerA1()&quot; &gt; &lt;div @click.stop=&quot;alerA2()&gt;&lt;div&gt; &lt;/div&gt; 这样就可以实现阻止点击 点击&#160;alerA2
    
                  
                                    
                            
    
                                 
    自用代码css获取任意网址的/favicon.ico的方法教程
    
                                
    尝试过使用网友说的API接口获取 找到的都是失效了 暂时就使用这种办法获取 如果有好的方法望评论告知 谢谢 &lt;img :ng-src=&quot;&#39;http://&#39;+list.url+&#39;/favicon.ico&#39;&quot; :src=&quot;&#39;ht
    
                  
                                    
                            
    
                                 
    JS实现 JSON扁平数据转换树状数据
    
                                
    后台我拿的数据是这样的格式: [ {id:1 , parentId: 0, name: &#39;&#39;, level: 0}, {id:2 , parentId: 0, name: &#39;&#39;, level: 0}, {id:3 , parentId: 2, name: &#39;&
    
                  
                                    
                            
    
                                 
    JAVA下载文件防重复点击,防止多次下载请求，Cookie方式快速简单集成教程
    
                                
    JAVA下载文件防重复点击,防止多次下载请求，Cookie方式快速简单集成教程 JS文件在最下面: 引入 &lt;script src=&quot;${path}/js/jquery-2.0.3.min.js&quot;&gt;&lt;/script&gt; &lt;script src=&quot
    
                  
                                    
                            
    
                                 
    Mip是什么意思以及作用有哪些
    
                                
    Mip是什么意思以及作用有哪些
    
                  
                                    
                            
    
                                 
    怎么测试Mip页面运行情况
    
                                
    怎么测试Mip页面运行情况
    
                  
                                    
                            
    
                                 
    MIP安装的具体步骤有哪些
    
                                
    MIP安装的具体步骤有哪些
    
                  
                                    
                            
    
                                 
    HTML添加超链接、锚点的方法及作用详解（附视频）
    
                                
    HTML添加超链接、锚点的方法及作用详解（附视频）
    
                  
                                    
                            
    
                                 
    MIP的规则有哪些
    
                                
    MIP的规则有哪些
    
                  
                                    
                            
    
                    
    

    
            
            
    
              
          
    
            
    
              
    



              
    
            
    
          
    
          
           
          
    
            
    
              
    
                
    苹果市值2025年有望达4万亿美元 
    
              
    
            
    
          
    
          
          
          
    
            
    
              
    
                
                
    pythonJavaScriptjavaHTMLreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-bootreact-native