通过 JavaScript 加载 iOS 'smart app banner'

Question

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

添加

实际的 smartbanner 就像将这个小块添加到 HTML:

的头部一样简单

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

不幸的是，我上传脚本的方式非常受限。我无法直接更改 HTML，所以我将通过我们的标签管理器来完成，它基本上是通过 JavaScript 来完成的。但事实证明，这是行不通的。

我已尝试简化测试案例：

HTML 中的硬编码标签：works（如预期）

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

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

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

插入 JavaScript，在 setTimeout 延迟后：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 的示例，所以很简单 JavaScript。但结果是一样的。一旦我们等待 setTimeout()，Smart App Banner 就无法加载。

原版 JavaScript - 直接执行。 works

showBanner();

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

原版 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:

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

异步加载。 DOES NOT WORK

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

然后调用相同的香草 JavaScript 直接执行 showBanner();

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 不可能显示原生横幅（如上测试，confirmed 由 apple 测试），唯一可行的解决方法是不使用原生smartbanner，而是创建你自己的。

例如使用 javascript 插件，例如 this

Answer 2

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

通过 JavaScript 加载 iOS 'smart app banner'

Load iOS 'smart app banner' through JavaScript

javascript

mobile-safari

ios

smartbanner