全部产品

打开新页面

更新时间:2020-09-03 15:42:32

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

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

pushWindow 接口的使用方法

  1. // 打开淘宝首页,自动读取 title,并且去除右边菜单按钮
  2. AlipayJSBridge.call('pushWindow', {
  3. url: 'https://m.taobao.com/', // 要打开页面的 URL
  4. // 打开页面的配置参数
  5. param: {
  6. readTitle: true, //自动读取 title
  7. showOptionMenu: false // 隐藏右边菜单
  8. },
  9. // 用于给新开的页面传递参数,可选
  10. // 在新开的页面使用 AlipayJSBridge.startupParams 可以获取到 passData
  11. passData: {
  12. key1: "key1Value",
  13. key2: "key2Value"
  14. }
  15. });
注意:对于 Android 应用,需要将参数放在param: { }中;对于 iOS 应用,则需要将参数放在 passData: { }里。

代码示例

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

    1. <h1>打开淘宝首页</h1>
    2. <a class="btn J_demo">执行</a>
    3. <script>
    4. function ready(callback) {
    5. // 如果 jsbridge 已经注入则直接调用
    6. if (window.AlipayJSBridge) {
    7. callback && callback();
    8. } else {
    9. // 如果没有注入则监听注入的事件
    10. document.addEventListener('AlipayJSBridgeReady', callback, false);
    11. }
    12. }
    13. ready(function(){
    14. document.querySelector('a').addEventListener('click', function() {
    15. // 打开淘宝首页,自动读取 title,并且去除右边菜单
    16. AlipayJSBridge.call('pushWindow', {
    17. url: 'https://m.taobao.com/',
    18. param: {
    19. readTitle: true,
    20. showOptionMenu: false
    21. }
    22. });
    23. });
    24. });
    25. </script>
  • 打开时设置透明标题栏。

    1. <h1>打开淘宝首页</h1>
    2. <a class="btn J_demo">执行</a>
    3. <script>
    4. function ready(callback) {
    5. // 如果 jsbridge 已经注入则直接调用
    6. if (window.AlipayJSBridge) {
    7. callback && callback();
    8. } else {
    9. // 如果没有注入则监听注入的事件
    10. document.addEventListener('AlipayJSBridgeReady', callback, false);
    11. }
    12. }
    13. ready(function() {
    14. document.querySelector('a').addEventListener('click', function() {
    15. AlipayJSBridge.call('pushWindow', {
    16. url: 'https://m.taobao.com',
    17. param: {
    18. transparentTitle: 'auto'
    19. }
    20. });
    21. });
    22. });
    23. </script>

API

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

入参

名称 类型 描述 必选 默认值
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 打开窗口的同时,关闭当前 Window。 false
closeAllWindow bool 打开窗口的同时,关闭当前 App 的所有 Window。 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

注意事项

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