通过JavaScript加载iOS“智能应用横幅”

Question

我在使用 iOS 智能应用横幅时遇到一些问题，我正在尝试通过 JavaScript 添加该横幅。

实际的 smartbanner 就像将这个小块添加到 HTML 的头部一样简单：

<meta name="apple-itunes-app" content="app-id=375380948">

不幸的是，我上传脚本的方式受到很大限制。我无法直接更改 HTML，因此我将通过我们的标签管理器来完成此操作，该管理器基本上是通过 JavaScript 来完成的。但事实证明这行不通。

我尝试简化测试用例：

1. HTML 中的硬编码标签：有效（如预期）

    <meta name="apple-itunes-app" content="app-id=375380948">
   

2. 文档准备好后直接用 JavaScript 插入：works

    $(document).ready(function(){
        $("head").append('<meta name="apple-itunes-app" content="app-id=375380948">');
    });
   

3. 用 JavaScript 插入，经过

   setTimeout

   延迟后：不起作用

    $(document).ready(function(){
        setTimeout(showBanner, 1);  //after 1 millisecond
    });
   
    function showBanner(){
        $("head").append('<meta name="apple-itunes-app" content="app-id=375380948">');
    }
   

任何人都可以确认或解释为什么这个延迟的 JavaScript 不起作用吗？

重要提示：要进行测试，请在实际的 iOS 设备上打开页面！ 桌面 Safari/Chrome 或 iOS 模拟器将无法运行。 另外，不要关闭横幅，因为它不会再次显示。

更新：

我添加了一些没有 jQuery 的示例，所以很简单的 JavaScript。但结果是一样的。一旦我们等待

setTimeout()

，智能应用横幅就无法加载。

5. Vanilla JavaScript - 直接执行。 有效

   showBanner();
   
   function showBanner() {
       var meta = document.createElement("meta");
       meta.name = "apple-itunes-app";
       meta.content = "app-id=375380948";
       document.head.appendChild(meta);
   }
   

6. Vanilla JavaScript - 延迟执行。 不起作用

   setTimeout(showBanner, 1);
   
   function showBanner() {
       var meta = document.createElement("meta");
       meta.name = "apple-itunes-app";
       meta.content = "app-id=375380948";
       document.head.appendChild(meta);
   }
   

更新2：

异步加载脚本时可以观察到完全相同的不幸行为

7. 异步加载。 不起作用

   <script src="async.js" async></script>
   

   然后调用相同的普通 JavaScript 并直接执行 显示横幅（）；

   function showBanner() {
       var meta = document.createElement("meta");
       meta.name = "apple-itunes-app";
       meta.content = "app-id=375380948";
       document.head.appendChild(meta);
   }
   

结论：

我只能得出结论，iOS Safari 只在主线程中查找 smartbanner 的 HTML。这让我很难过:-(

仅限直接可用的 HTML，或通过 JavaScript 同步添加的 HTML。 但不允许任何异步操作，无论是异步加载 JavaScript，还是使用

setTimeout()

（或使用

eval()

的其他构造）

Answer 1

由于如果在页面加载后插入本机横幅，则不可能让 safari 显示本机横幅（如上所述，并且由苹果确认），因此唯一可行的解决方法是不使用本机 smartbanner，而是创建您的自己的。

例如使用像 this

这样的 javascript 插件

Answer 2

我用了你的代码：

var meta = document.createElement("meta");
meta.name = "apple-itunes-app";
meta.content = "app-id=375380948";
document.head.appendChild(meta);

并在 dom 就绪事件之前插入，效果很好。

Answer 3

自 2017 年 4 月起，如果稍后通过 JavaScript 添加，智能横幅将会显示。