pushWindow 打开新页面

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
})

入参

param参数详解

pushWindow参数默认继承

如何正确理解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。