如何用pushWindow接口在离线包内打开新页面_移动开发平台 mPaaS-阿里云帮助中心

pushWindow 用于在同一个离线包内打开一个新的页面，打开时自带系统转场动画。若您需要跨 appId 打开其他离线应用页面，请使用 startApp 接口。

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

pushWindow 接口的使用方法

// 打开淘宝首页，自动读取 title，并且去除右边菜单按钮
AlipayJSBridge.call('pushWindow', {
  url: 'https://m.taobao.com/',   // 要打开页面的 URL
  // 打开页面的配置参数
  param: {
    readTitle: true,              //自动读取 title
    showOptionMenu: false         // 隐藏右边菜单
  },
  // 用于给新开的页面传递参数，可选
  // 在新开的页面使用 AlipayJSBridge.startupParams 可以获取到 passData
  passData: {
    key1: "key1Value",
    key2: "key2Value"
  }
});

注意

对于 Android 应用，需要将参数放在 param: { } 中。
对于 iOS 应用，则需要将参数放在 passData: { } 里。

代码示例

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

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

打开时设置透明标题栏。

<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 说明

注意

pushWindow 打开 URL 页面的时候不会关闭已经存在的页面，注意打开个数，不要同时开太多而影响性能。
建议同一个应用 pushWindow 的层级不要超过 5 层，否则会影响用户体验而且有可能导致应用 crash。

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

入参

名称	类型	描述	必选	默认值
url	string	要打开的 URL。	Y	“”
param	dictionary	支持的 key/value 对下面的表格。	N	{}
passData（仅适用于 iOS）	dictionary	传递的参数，打开页面使用 `AlipayJSBridge.startupParams` 获取。	N	{}

param 参数详解

名称	类型	描述	默认值
defaultTitle	string	默认标题，在页面第一次加载之前显示在标题栏上。	“”
showLoading	bool	是否在页面加载前显示全局菊花。	false
readTitle	bool	是否读取网页标题显示在 titleBar 上。	true
pullRefresh	bool	是否支持下拉刷新只有本地文件允许设置为 true。	false
allowsBounceVertical	bool	页面是否支持纵向拽拉超出实际内容，Android 只支持下拉（显示出背景或者域名）。只有 `.alipay.com/.alipay.net/` 本地文件允许设置为 false。	true
bounceTopColor	int	下拉超出时，顶部间缝颜色（十进制，例如：bc=16775138）。	-
showTitleLoading	bool	是否在 TitleBar 的标题左边显示小菊花。	false
transparentTitle	string	不能与 `titleBarColor` 同时使用。always/auto： 1、`always`：当前页面上下滚动时，titlebar 一直全透明。 2、`auto`：当页面往下滚动时，透明度不断增加，直到 80 pt 时变成完全透明，此时页面再往上滚动则反之，透明度不断减小直到回到顶部时变成完全不透明。 3、`none`：如果这个页面不需要透明效果，则需要用 `pushWindow` 的 `param` 参数重新指定 `transparentTitle` 为“none”。	-
titleBarColor	int	自定义 titlebar 的背景色（十进制，例如：bc=16775138）。注意不能与 `transparentTitle` 同时使用。	-
scrollDistance	int	在 `transparentTitle` 为 auto 的情况下，滑动到透明度为 0.96 的距离。	80（iOS）
titleImage	string	所要使用的 title 图片地址，请上传一张 3X PNG 图，只影响当前的 VC，`pushWindow` 不会自动传递此参数，为了更好的体验可以把图放在全局运营资源包中。	“”
closeCurrentWindow	bool	打开窗口的同时，关闭当前窗口。	false
closeAllWindow	bool	打开窗口的同时，关闭当前 App 的所有窗口。	false
animationType	string	动画类型，默认为 “push”，可用枚举 “none”/“push”。注意 Android 未实现，均无动画。	“”

pushWindow 参数默认继承

名称	继承	备注
url	Y	-
defaultTitle	Y	-
backBehavior	Y	优先用户指定，否则 pop。
showLoading	Y	-
readTitle	Y	-
pullRefresh	Y	-
toolbarMenu	Y	-
showProgress	Y	-
defaultSubtitle	Y	-
backgroundColor	Y	-
canPullDown	Y	-
showOptionMenu	Y	-
showTitleLoading	Y	-
showDomain	Y	-

pushWindow 和 location.href 的区别

您可以根据以下内容理解 pushWindow 和 location.href 的区别：

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