更新时间:2020-12-23 15:34
pushWindow
用于在同一个离线包内打开一个新的页面,打开时自带系统转场动画。若您需要跨 appId 打开其他离线应用页面,请使用 startApp 接口。
pushWindow
与前端 location.href
的区别,类同于 PC 浏览器的新开标签页,每个 window 都是一个新的标签页,因此原页面仅仅是被压到后台,状态始终保持,JS 也会继续运行。
// 打开淘宝首页,自动读取 title,并且去除右边菜单按钮
AlipayJSBridge.call('pushWindow', {
url: 'https://m.taobao.com/', // 要打开页面的 URL
// 打开页面的配置参数
param: {
readTitle: true, //自动读取 title
showOptionMenu: false // 隐藏右边菜单
},
// 用于给新开的页面传递参数,可选
// 在新开的页面使用 AlipayJSBridge.startupParams 可以获取到 passData
passData: {
key1: "key1Value",
key2: "key2Value"
}
});
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>
AlipayJSBridge.call('pushWindow', {
url, param, passData
})
名称 | 类型 | 描述 | 必选 | 默认值 |
---|---|---|---|---|
url | string | 要打开的 URL。 | Y | “” |
param | dictionary | 支持的 key/value 对下面的表格。 | N | {} |
passData(仅适用于 iOS) | dictionary | 传递的参数,打开页面使用 AlipayJSBridge.startupParams 获取。 |
N | {} |
名称 | 类型 | 描述 | 默认值 |
---|---|---|---|
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 | 打开窗口的同时,关闭当前 Window。 | false |
closeAllWindow |
bool | 打开窗口的同时,关闭当前 App 的所有 Window。 | false |
animationType |
string | 动画类型,默认为 “push”,可用枚举 “none”/“push”。 注意:Android 未实现,均无动画。 |
“” |
名称 | 继承 | 备注 |
---|---|---|
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
的区别:
location.href
就是正常的标签跳转。pushWindow
实际上就是新开了一个标签页,并且把之前那一页压到下面,push
出来的这页放在顶层展现。此时被压到下面的上一页所有状态均保留。location.href
就是依然停留在这个标签页,直接做页面跳转。pushWindow
出来的标签页被关闭(pop)时,如果之前还有 window 存在,那么之前那个 window 就会恢复显示,并触发 resume
。pushWindow
打开 URL 页面的时候不会关闭已经存在的页面,注意打开个数,不要开太多影响性能。建议同一个应用 pushWindow
层级不要超过 5 层,否则会影响用户体验而且有可能导致应用 crash。
在文档使用中是否遇到以下问题
更多建议
匿名提交