在开发 h5跳转到 ios系统 app store的时候遇到两个问题
原理
- 判断是安卓还是苹果,如果为苹果显示苹果的标签,点击a标签,执行跳转唤起APP(openAPP),加一个定时器,三秒(可根据需求调整)之后,如果没有唤起成功,跳转到App Store下载页面。
- 不管iOS还是Android,浏览器都不可能预知本地是否安装了某个APP的。或者更严谨地说,我们不能通过浏览器来预知本地是否安装。因为就算浏览器可以读取本地应用的安装列表,但是目前也没任何一家浏览器提供查询的API,所以这条路是走不通的。
问题 1
ios中是不能通过window.location.href来跳转的。浏览器会报非法地址。
解决
插入a标签模拟点击事件。
问题 2
ios跳转到app之后,之后的还会执行再继续打开app store
解决
通过document.webkitHidden判断是否是visibilitychange 窗口不可见
if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
var loadDateTime = new Date();
//ios9可以通过配置一个已有的链接打开app,需要给服务器上传一个校验文件
// window.location.href = 'https://www.umacaroon.com';
$('body').append("<a id='to_ios_app' href='ios跳转app链接'></a>")
var obj = document.getElementById('to_ios_app');
obj.click();
//会提示此链接非私人链接
//目前还有一个问题需要用iframe来解决,到时候补充
setTimeout(function () {
// window.alert(document.webkitHidden)
// window.location = 'https://itunes.apple.com/app/id1271022527?mt=8'
//判断是不是可见
if (typeof document.webkitHidden === 'undefined') {
$('body').append("<a id='to_ios_market' href='https://itunes.apple.com/app/id1271022527?mt=8'></a>")
var obj = document.getElementById('to_ios_market');
obj.click();
}
}, 600);
}