15

JavaScript を使用して追加しようとしているiOS Smart App Bannerに問題があります。

実際の 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 で直接挿入:動作

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

  3. setTimeout遅れて JavaScript で挿入:動作しません

     $(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を待っているとすぐに読み込みに失敗します。

  1. バニラ JavaScript - 直接実行。作品

    showBanner();

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

  2. バニラ 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 :

スクリプトを非同期でロードすると、まったく同じ不幸な動作が観察される可能性があります

  1. 非同期読み込み。動作しません

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

    次に、直接実行する showBanner(); で同じバニラ 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 の smartbanner のみを検索すると結論付けることができます。そして、それは私を悲しくさせます:-(

直接利用可能な HTML、または JavaScript によって同期的に追加された HTML のみ。ただし、JavaScript を非同期的にロードするsetTimeout()か、(または を使用する他の構成要素eval())を使用して、a-sync アクションは許可されません。

4

2 に答える 2