打开新页面

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 层,否则会影响用户体验而且有可能导致应用崩溃。

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:如果这个页面不需要透明效果,则需要用 pushWindowparam 参数重新指定 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 的区别

您可以根据以下内容理解 pushWindowlocation.href 的区别:

  • 首先把 Nebula 容器理解为一个 PC 浏览器。

  • window 可以理解为标签页,location.href 就是正常的标签跳转。

  • pushWindow 实际上就是新开了一个标签页,并且把之前那一页压到下面,push 出来的这页放在顶层展现。此时被压到下面的上一页所有状态均保留。

  • location.href 就是依然停留在这个标签页,直接做页面跳转。

  • 当 pushWindow 出来的标签页被关闭(pop)时,如果之前还有 window 存在,那么之前那个 window 就会恢复显示,并触发 resume