JSAPI

  • Since 8.1

    popTo

    popTo可以一次回退多级页面

    注意:只允许popTo到当前app实例内的页面,不允许跨appId跳转

    使用方法

    // 关闭当前打开的页面
    AlipayJSBridge.call('popTo', {
      index: -1
    });
    

    代码演示

    关闭当前页面并且传递数据

    
    
    <h1>点击"执行"关闭当前页面并返回数据</h1>
    <a href="#" class="btn J_demo">执行</a>
    <script>
    function ready(callback) {
      // 如果jsbridge已经注入则直接调用
      if (window.AlipayJSBridge) {
        callback && callback();
      } else {
        // 如果没有注入则监听注入的事件
        document.addEventListener('AlipayJSBridgeReady', callback, false);
      }
    }
    ready(function(){
      document.querySelector('.J_demo').addEventListener('click', function() {
        // 传递的data对象将会被即将露出的页面通过resume事件接收
        AlipayJSBridge.call('popTo', {
          index: -1, // 回退到上一个页面,假如这个时候没有上一个页面,就会报错
          data: { //特别强调:data是字典,不是数组
            from: location.href,
            info: Date.now()
          }
        }, function(e) { // 添加回调,因为popTo不一定会成功(当前页面是唯一打开的页面的时候,会报错)
          alert(JSON.stringify(e));
        });
      });
    });
    </script>
    

    通过urlPattern返回到符合正则匹配的页面

    <h1>返回到符合某个规则的url</h1>
    <h3></h3>
    <a href="javascript:void(0)" class="btn J_new_window">新窗口打开当前页面</a>
    <a href="javascript:void(0)" class="btn J_demo">返回</a>
    <script>
    var query = getQuery();
    var depth = (+query.depth) || 0;
    
    document.querySelector('h3').innerHTML = '当前页面深度: ' + depth;
    
    function ready(callback) {
      // 如果jsbridge已经注入则直接调用
      if (window.AlipayJSBridge) {
        callback && callback();
      } else {
        // 如果没有注入则监听注入的事件
        document.addEventListener('AlipayJSBridgeReady', callback, false);
      }
    }
    ready(function(){
      document.querySelector('.J_demo').addEventListener('click', function() {
        AlipayJSBridge.call('popTo', {
          urlPattern: 'pop-to-url-pattern.html',
        }, function(e) {
          alert(JSON.stringify(e));
        });
      });
    
      document.querySelector('.J_new_window').addEventListener('click', function() {
        AlipayJSBridge.call('pushWindow', {
          url: location.pathname + '?depth=' + (1+depth),
        });
      });
    });
    </script>
    

    API

    AlipayJSBridge.call('popTo',{
      index, urlPattern
    }, fn)
    

    index, urlPattern 这是2种查询模式,不应该被同时使用。

    入参

    名称类型描述必选默认值版本
    indexint目标界面在会话界面栈中的索引;如果小于零,则将与当前界面的index相加Y
    urlPatternstring目标界面的URL匹配表达式(URL如果包含urlPattern,匹配成功) Y
    fnfunction操作成功时,回调可能不被调用;操作失败时,回调函数执行N

    出参

    名称类型描述
    resultundefined操作成功时,回调可能不被调用;result不应被使用

    错误

    error描述
    10未配置参数;
    无效的index;
    未匹配urlPattern;

    使用注意

    • 一般情况下,popTo用于分多步才能完成的场景,比如用户信息完善时回退,三级地址选择后返回等。
    • 如果通过urlPattern来返回,popTo会返回到离当前页面最远的页面,也就是栈底。同时不会去检测当前页面的url是否符合。
    • popTo时所带的data如何被接收? 请查看resume事件