升级了iOS6后测试了一下给应用推广来的新特性SMART APP BANNERS .首先要在head标签添加如下meta

<meta name="apple-itunes-app" content="app-id=425349261,app-argument=newsapp://doc/8BU4DQ9P00963VRO">

要注意的是content属性:

app-id即是你的应用id,app-argument则用作打开应用时的URL,比如打开网易新闻对应的新闻VIEW。

来看看几组测试结果吧:

升级了iOS6的iOS设备,不过有点小BUG,比如new ipad中整条内容部分是居左而没居中显示,itouch4只有在对应的应用成功安装了才显示。希望这些BUG是个别机子,因为测试条件有限没有全面测试。

我想你会问,如果动态添加这条meta会是什么结果呢?先来看看:

        var  headEl = document.head || document.getElementsByTagName('head')[0],el;
        el = document.createElement('meta');
        el.name='apple-itunes-app';
        el.content = 'app-id=425349261,app-argument=newsapp://doc/8BU4DQ9P00963VRO';
        headEl.appendChild(el);

测试结果模拟器和真实设备中正常显示。不过:

        var  headEl = document.head || document.getElementsByTagName('head')[0],el;
        el = document.createElement('meta');
        el.name='apple-itunes-app';
        el.content = 'app-id=425349261,app-argument=newsapp://doc/8BU4DQ9P00963VRO';
        setTimeout(function(){
            headEl.appendChild(el);
        },1000);

对,这才是真正的动态添加测试,结果很遗憾,无论是模拟器中还是真实设备中都没有显示。也就是说,如果你的页面是个OPOA页面的话,想通过ajax之类获取应用的信息再添加meta是不会得到预想的结果的。当然,如果你有类似的需求可以试试在mobile safari中巧妙实现检测应用安装就打开,否则进App Store下载

但是动态修改app-argument是没有问题的,如:

        var  headEl = document.head || document.getElementsByTagName('head')[0],el;
        el = document.createElement('meta');
        el.name='apple-itunes-app';
        el.content = 'app-id=425349261,app-argument=newsapp://doc/';
        headEl.appendChild(el);
        setTimeout(function(){
           el.content += '8BU4DQ9P00963VRO';
        },10000);

注意,SMART APP BANNERS占用的空间并不是Document的一部分,所以如果你的Web App使用了window.scrollTo(0, 1); 来隐藏地址栏,那么SMART APP BANNERS也会同时被隐藏掉。

要求在页面载入时就得知道应用id还是有不少的应用场景限制的。

来详细解说一下content,此属性可以逗号分隔的三个参数:

  • app-id: (必选) 对应应用的ID. 如不知道应用的ID可以通过应用名称在这查iTunes Link Maker,点开iPhone App Link应用ID就是id 和 ?mt之间那串数字.(如下图)
  • affiliate-data: (可选) 如果你的应用是个iTunes affiliate才有这个玩艺.
  • app-argument: (可选) 打开你应用的URL,可带参数的。只有在用就设备里安装了对应的应用这有用。通过参数你可以打开对应应用指定的制作的,其实通过这种方式来触发对应应用的相应导航是非常有用的:
    • 如果用户在你网站上的当前位置级数比较深,你完全将当前网站的URL传给应用来处理并打开对应的应用位置。
    • 如果用户在当前网站进行搜索,你可以将搜索关键字传到对应应用中直接进行搜索而不用用户再次输入。
    • 如果用户在网站上进行编辑,你可以将session ID传到对应应用中然后再下载 session值,这样用户在应用中就能进行无缝的工作了。

    你可以动态给app-argument赋值的。值可以格式化成你需要的格式,只要是合法的URL就行。

    不能在iframe里使用此功能。