JSAPI

    • pushWindow

    pushWindow用来打开一个新的页面，系统自带转场动画。不允许跨appId打开其他离线应用的虚拟域名页面(可换用startApp接口)。

    scheme跳转请尽量使用location.href而不是pushWindow。

    与location.href的区别，类同于PC浏览器的新开标签页，每个window都是一个新的标签页，因此原页面仅仅是被压到后台，状态始终保持，JS也会继续运行。

    使用方法

    // 打开淘宝首页，自动读取title，并且去除右边菜单
AlipayJSBridge.call('pushWindow', {
  url: 'https://m.taobao.com/',
  param: {
    readTitle: true,
    showOptionMenu: false
  }
});

    代码演示

    打开淘宝首页，去除右边菜单

    <h1>打开淘宝首页</h1>
<a 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('a').addEventListener('click', function() {
    // 打开淘宝首页，自动读取title，并且去除右边菜单
    AlipayJSBridge.call('pushWindow', {
      url: 'https://m.taobao.com/',
      param: {
        readTitle: true,
        showOptionMenu: false
      }
    });
  });
});
</script>
    查看演示
    扫码查看
    用支付宝扫码运行

    用schema的方式打开页面(禁止使用)

    警告：此方式非正常流程，仅用于向下兼容老业务，新业务请避免使用！ 否则不保证所有场景均符合预期

    9.9.5开始支持，此前使用该方式会导致先打开一个空白页面。

    <h1>打开指定app</h1>
<a 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('a').addEventListener('click', function() {
    AlipayJSBridge.call('pushWindow', {
      url: 'alipays://platformapi/startapp?appId=60000002',
    });
  });
});
</script>
    查看演示
    扫码查看
    用支付宝扫码运行

    打开时设置透明标题栏

    <h1>打开淘宝首页</h1>
<a 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('a').addEventListener('click', function() {
    AlipayJSBridge.call('pushWindow', {
      url: 'https://m.taobao.com',
      param: {
        transparentTitle: 'auto'
      }
    });
  });
});
</script>
    查看演示
    扫码查看
    用支付宝扫码运行

    API

    AlipayJSBridge.call('pushWindow', {
  url, param
})

    入参

    名称类型描述必选默认值版本
    urlstring要打开的urlY
    paramdictionary支持的key/value对下面的表格N{}

    param参数详解

    名称类型描述默认值版本
    defaultTitlestring默认标题, 在页面第一次加载之前显示在标题栏上‘’
    showLoadingbool是否在页面加载前显示全局菊花false
    readTitlebool是否读取网页标题显示在titleBar上true
    pullRefreshbool是否支持下拉刷新
    只有集团域/本地文件允许设置为true    		falsesince 8.2
    canPullDownbool页面是否支持下拉（显示出黑色背景或者域名）
    只有.alipay.com/.alipay.net/本地文件允许设置为false
    9.9.5废弃， 使用’allowsBounceVertical’替代    		trueandroid since 8.3
    ios since 8.4，
    allowsBounceVerticalbool页面是否支持纵向拽拉超出实际内容，android只支持下拉（显示出背景或者域名）
    只有.alipay.com/.alipay.net/本地文件允许设置为false    		truesince 9.9.3
    bounceTopColorint下拉超出时，顶部间缝颜色（十进制，例如：bc=16775138）不设置时与9.9.3之前显示一致since 9.9.3
    bounceBottomColorint上拉超出时，底部间缝颜色（十进制，例如：bc=16775138）不设置时与9.9.3之前显示一致since 9.9.3(only IOS)
    showTitleLoadingbool是否在TitleBar的标题左边显示小菊花falsesince 8.6
    preRpcstring在页面启动参数里配置rpc请求的参数preRpc（需要使用utf-8编码），在打开页面的同时请求rpc。详细使用参考RPC接口介绍since 9.3
    delayRenderbool是否启动延迟渲染功能
    注：本功能目前由线上开关控制，若线上开关打开，且指定启动参数为YES或TRUE则生效    		falsesince 9.3.1(only Android)
    transparentTitlebool(不能与titleBarColor同时使用)
    always/auto 如果transparentTitle为字符串always，则当前页面上下滚动时，titlebar一直全透明；
    当transparentTitle值为auto，当页面往下滚动时，透明度不断增加，直到scrollTop等于80pt时变成完全不透明，此时页面再往上滚动则反之，透明度不断减小直到回到顶部时变成完全不透明。
    如果个页面不需要透明效果，则需要用pushWindow的param参数重新指定transparentTitle为”none”
    使用注意：
    1. titlebar透明时，页面内容从屏幕最顶部开始布局，页面需要预留titlebar的高度防止title遮挡页面内容。
    2. Android 5.0以下由于不支持沉浸式状态栏，所以页面会从状态栏下开始布局。
    3. 可以通过 getTitleAndStatusbarHeight JSAPI 获取状态栏和titlebar的高度，用于页面调整预留高度。
    		‘’since 9.5.1
    titleBarColorint(9.9版本以下不能与transparentTitle同时使用)自定义titlebar的背景色，（十进制，例如：bc=16775138）
    scrollDistanceint在 transparentTitle auto的情况下，滑动到透明度为0.96的距离iOS(80)since 9.9
    titleImagestring所要使用的title图片地址，请上传一张3X PNG 图，只影响当前的VC，pushWindow不会自动传递此参数，为了更好的体验可以把图放在全局运营资源包中‘’since 9.9.5
    closeCurrentWindowbool打开窗口的同时，关闭当前window。警告：iOS上发现有缺陷:10.0.15版本以前，被打开的新页面会导致无法再通过exitApp或startApp+closeCurrentApp来关闭，这种使用场景请勿使用pushWindow+closeCurrentWindow，10.0.15已修复falsesince 9.9.2
    closeAllWindowbool打开窗口的同时，关闭当前App的所有windowfalsesince 10.0.20
    animationTypestring动画类型，默认为’push’，可用枚举’none’/‘push’。 说明：android未实现，均无动画‘’since 10.0.15

    pushWindow参数默认继承

    名称继承备注
    urlY
    defaultTitleY
    backBehaviorY优先用户指定,否则pop
    showLoadingY
    readTitleY
    pullRefreshY
    toolbarMenuY
    showProgressY
    defaultSubtitleY
    backgroundColorY
    canPullDownY
    showOptionMenuY
    showTitleLoadingY
    showDomainY

    如何正确理解pushWindow与location.href

    许多新手都会不太理解pushWindow和location.href的区别，同时也会疑惑为什么resume没有被触发之类的问题。 本篇话题只需要几分钟就能把这几个功能解释清楚。

    • 首先把Nebula容器理解为一个PC浏览器。
    • window可以理解为标签页；location.href就是正常的a标签跳转。
    • pushWindow实际上就是新开了一个标签页，并且把之前那一页压到下面，push出来的这页放在顶层展现。此时被压到下面的上一页所有状态均保留。
    • location.href就是依然停留在这个标签页，直接做页面跳转
    • 当pushWindow出来的标签页被关闭(pop)时，如果之前还有window存在，那么之前那个window就会恢复显示，并触发resume

    使用注意

    • pushWindow打开url页面的时候不会关闭已经存在的页面，注意打开个数，不要开太多影响性能。建议同一个应用pushWindow层级不要超过5层，否则会影响用户体验以及有可能导致应用crash。
    • pushWindow打开schema页面的时候会关闭这个appId已经存在的所有页面，然后打开一个新的。 比如已经打开了60000002，然后再使用pushWindow打开这个appId，那么当前的60000002页面会被关闭
    • 使用schema的时候，假如参数不生效，请不要担心，因为每个app有配置会覆盖传入的参数。 比如上述的60000002，传入transparentTitle: 'auto'是没有效果的。
    • 9.9.2版本开始，可以使用closeCurrentWindow参数来替代window.location.href跳转,而且有动画效果支持，这样可以实现关闭当前window的同时打开一个新页面。但在iOS发现有缺陷，被打开的新页面会导致无法再通过exitApp或startApp+closeCurrentApp来关闭自身，这种使用场景请勿使用pushWindow+closeCurrentWindow。
    Copyright @ 2018 杭州蚂蚁金服 ｜ ICP证浙B2-20160559