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

Question

我在使用 iOS Smart App Banner 时遇到了一些问题，我正在尝试通过 JavaScript 添加它。

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

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

很遗憾，我上传脚本的方式非常有限。我不能直接更改 HTML，所以我将通过我们的跟踪代码管理器来完成，它基本上是通过 JavaScript 来完成的。但事实证明这是行不通的。

我试图简化测试用例：

1. HTML 中的硬编码标记：works（如预期）

    <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 插入，在 @​​987654332@ 延迟后：DOES NOT WORK

    $(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 的示例，所以很简单的 'ol JavaScript。但结果是一样的。一旦我们等待setTimeout()，智能应用横幅就无法加载。

5. Vanilla JavaScript - 直接执行。 works

   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 - 延迟执行。 DOES NOT WORK

   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：

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

1. 异步加载。 DOES NOT WORK

   <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 只在主线程中寻找智能横幅 HTML。这让我很难过:-(

仅直接可用的 HTML，或通过 JavaScript 同步添加的 HTML。 但是不允许异步操作，无论是异步加载 JavaScript，还是使用 setTimeout()（或其他使用 eval() 的构造）

Answer 1

由于如果在页面加载后插入 safari 就不可能显示原生横幅（如上测试，Apple 为 confirmed），唯一可行的解​​决方法是不使用原生 smartbanner，而是创建你自己的。

例如使用像this这样的javascript插件

Answer 2

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