h5跳转到 苹果 ios app store 应用商店 的APP详情页面

在开发  h5跳转到 ios系统 app store的时候遇到两个问题

原理

1. 判断是安卓还是苹果，如果为苹果显示苹果的标签，点击a标签，执行跳转唤起APP（openAPP），加一个定时器，三秒（可根据需求调整）之后，如果没有唤起成功，跳转到App Store下载页面。
2. 不管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);
    }