iOS6的Mobile Safari给前端开发者带来了什么  里已经提到iOS6的mobile safari将有智能应用通知标题(Smart App Banners)的功能,意在解决mobile safari里无法检测第三方应用安装状态的,通过这个功能,可以在页面中实现应用推荐类的需求。但目前来看,要实现这个需求只能在第三方应用中实现。思路也简单,第三方应用可以通过iOS的SDK提供的接口检测到对应的应用是否已经安装,然后在内嵌的UIWebView中打开的连接时追加参数如“?isinstalled=1”之类的参数供web页面获取来判断。web获知状态后可以提示给用户觖发的对应的应用的方案,如“打开应用”,“安装应用”等。

不过我们今天来说一种不借助第三方应用在mobile safari里就能实现跟上述类似的功能。

先来看看实现代码:



<body>        


         <div>        


         点击连接        


         <br />        


         如果已经安装网易新闻客户端将<font color=         "blue"         >打开对应新闻</font>        


         <br />        


         否则<font color=         "red"         >打开 APPSTORE</font>        


         <br />        


         <a href=         "newsapp://doc/8A7OMFOJ00014JB6"         ></a>        


         <a onClick=         "javascript:try_to_open_app();"          href=         "newsapp://doc/8A7OMFOJ00014JB6"         >打开网易新闻</a>        


         </div>        


         <script language=         "javascript"         >        


         var          timeout;        


         function          open_appstore() {        


         window.location=         'http://itunes.apple.com/cn/app/id425349261?mt=8'         ;        


         }        


                  


         function          try_to_open_app() {        


         timeout = setTimeout(         'open_appstore()'         , 300);        


         }        


         </script>        


         </body>



思路是:
1.连接的指向打开应用
2.onclick触发延时打开App Store下载应用页面
你可以保存以上代码进行测试。那为什么可实现呢?因为当你点击连接的同时是打开应用现时300ms后打开下载页面,如果应用成功打开生命周期就是激活状态,那么浏览器的状态是进入后台,页面里的所有操作都被注销了,显然timeout会被clear掉,但如果你没有成功打开应用即返回404,那么300ms到页面当然会自动跳转了。这里需要注意a元素的target不能是“_blank”,具体原因我想你已经知道了。
这种方式使用有两个缺点:
1.如果应用没有安装的话页面在跳转至App Store的同时会弹出打不开网址的提示。当然将连接协议改成itms-apps://可以避免

2.在设计过程中文案只能是“打开应用”之类,因为检测过程是由mobile safari自动实现的

有人会想到,可否通过new Image()的onload和onerror实现提前检测应用是否已经安装呢?答案是否定的,测试结果表明,这种方式即使应用已经安装还是会触发onerror。