空页面重定向
2022-02-22 本文已影响0人
AAA前端
- 有个需求，通过接口获取第三方给页面，由于第三方的页面随时会变，所有不好让APP原生写死，便通过h5写一个空白页面，获取到第三方页面后跳转。
其中碰到两个问题
安卓跳转第三方页面后，点击返回，会返回到我的空白页面，然后再次跳转到第三方页面
ios返回我的空白页面不会触发reload事件
- 对于第一个问题，我是通过url处理，APP开始进入我的页面时，会带参数，然后
history.pushState方法把参数去掉，这样，当安卓返回我的页面后，我通过url参数判断是返回还是首次进入处理。 - 第二个问题，ios返回不会重新刷新页面，通过监听
pageshow事件，在该事件中处理返回的事件。
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title></title>
</head>
<body>
</body>
<script>
var u = navigator.userAgent
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
// 用于app 中转跳 第三方
var hash = location.hash
// ios返回上一页面不会刷新
if (isiOS) {
window.onload = function () {
var isPageHide = false;
window.addEventListener('pageshow', function () {
if (isPageHide) {
// 自家APP封装的关闭容器方法
window.webkit.messageHandlers.NativeFunction.postMessage(JSON.stringify({
'command': 'closePageAction',
'parameter': ''
}))
}
});
window.addEventListener('pagehide', function () {
isPageHide = true;
});
}
}
// 首次进入
if (hash) {
// 去掉 url上带的参数
history.pushState({}, '', location.origin + location.pathname)
} else {
// ios不会进入这里
if (isAndroid) {
// 调用自家APP封装的 方法 同意后关闭容器
window.jsobj.NativeFunction(JSON.stringify({
'command': 'agree'
}))
}
}
// 接口获取第三方页面 并跳转
var ajax = new XMLHttpRequest();
ajax.open('get', '/getgroup');
ajax.send();
ajax.onreadystatechange = function () {
if (ajax.readyState == 4 && ajax.status == 200) {
var res = JSON.parse(ajax.response)
if (res.code == 0) {
// 接口通过hash 跳转不同页面
res.data.forEach(function (item) {
if (item.agreementCode == 'tk_customerprivacy_agreement' && hash == '#1') {
window.location.href = item.agreementUrl
return false
}
if (item.agreementCode == 'tk_customerservice_agreement' && hash == '#2') {
window.location.href = item.agreementUrl
return false
}
})
}
}
}
</script>
</html>
