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 | 传递的参数,打开页面使用 | N | {} |
param 参数详解
名称 | 类型 | 描述 | 默认值 |
defaultTitle | string | 默认标题,在页面第一次加载之前显示在标题栏上。 | “” |
showLoading | bool | 是否在页面加载前显示全局菊花。 | false |
readTitle | bool | 是否读取网页标题显示在 titleBar 上。 | true |
pullRefresh | bool | 是否支持下拉刷新只有本地文件允许设置为 true。 | false |
allowsBounceVertical | bool | 页面是否支持纵向拽拉超出实际内容,Android 只支持下拉(显示出背景或者域名)。只有 | true |
bounceTopColor | int | 下拉超出时,顶部间隙颜色(十进制,例如:bc=16775138)。 | - |
showTitleLoading | bool | 是否在 TitleBar 的标题左边显示小菊花。 | false |
transparentTitle | string | 不能与 1、 2、 3、 | - |
titleBarColor | int | 自定义 titlebar 的背景色(十进制,例如:bc=16775138)。 重要 不能与 | - |
scrollDistance | int | 在 | 80(iOS) |
titleImage | string | 所要使用的 title 图片地址,请上传一张 3X PNG 图,只影响当前的 VC, | “” |
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
。