重庆分公司

• 首页
• 关于我们
• 服务项目
  

  高端网站定制

  

  微信定制

  

  APP开发服务

  

  网络营销服务

  

  电商网站建设

  

  生物医药网站建设

  

  外贸网站建设

  

  教育培训网站建设
• 小程序开发
• 案例展示
  

  网站建设

  

  小程序

  

  电商平台

  

  APP

  

  系统平台
• 建站知识
• 联系我们

咨询热线 ：

028-86922220

interface History {
  readonly attribute unsigned long length;
  attribute ScrollRestoration scrollRestoration;
  readonly attribute any state;
  void go(optional long delta = 0);
  void back();
  void forward();
  void pushState(any data, DOMString title, optional DOMString? url = null);
  void replaceState(any data, DOMString title, optional DOMString? url = null);
};

        城市
    

    
        日历
    

    
        说明
    

    
      模拟城市弹框层
    

  button {
          border: #0000;
          background-color: #f90;
      }
      .com {
        position: absolute ;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #888589;
      }

var cityNode = document.getElementById('city');
    var calendarNode = document.getElementById('calendar');
    var descriptionNode = document.getElementById('description');
      function city() {
        cityNode.style.display = 'block';
        window.history.pushState({'id':'city'},'','#city')
      }
      function calendar() {
        calendarNode.style.display = 'block';
        window.history.pushState({'id':'calendar'},'','#calendar')
      }
      function description() {
        descriptionNode.style.display = 'block';
        window.history.pushState({'id':'description'},'','#description')
      }
      window.addEventListener('popstate', function(e){
        // alert('state:' + e.state + ', historyLength:' + history.length);
        if (e.state && e.state.id === 'city') {
            history.replaceState('','','#');
            cityNode.style.display = 'block';
        } else if (e.state && e.state.id === 'calendar') {
            history.replaceState('','','#');
            calendarNode.style.display = 'block';
        } else if (e.state && e.state.id === 'description') {
            history.replaceState('','','#');
            descriptionNode.style.display = 'block';
        } else {
            cityNode.style.display = 'none';
            calendarNode.style.display = 'none';
            descriptionNode.style.display = 'none';
        }
      })

主要看 JS 代码，监听页面的前进和后退事件来控制history。

看完了这篇文章，相信你对“Html5页面中如何实现返回”有了一定的了解，如果想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！

分享至：

   

关于我们

公司简介 发展历程

服务项目

高端网站建设 小程序开发 APP开发 网络营销

建站知识

网站建设 网站设计 网站制作 小程序

联系我们

公司地址 人才招聘

成都 重庆



电话：028-86922220



地址：成都市太升南路288号锦天国际A幢1002号



电话：028-86922220



地址：重庆市南岸区弹子石腾龙大道58号2栋21-6

版权所有：成都创新互联科技有限公司重庆分公司 渝ICP备2021005571号-4