【javascript】appendChildの動作について

[ななし]

埋め込みスクリプトを　<script src="外部アドレス +リクエストパラメータ(変数)"></script>　の形で書きページに描写したいです。

セクションの「page.liquid」を複製し、endstyle と schemaの間のhtml部分を以下のようにスクリプト要素を作成し、appendChildで追加する形に書き換えました。

コンソールログでappendChildの直前まですべてうまくいっていることを確認できているのですが、おそらくappendchildだけ正常動作できていないのか、埋め込みスクリプトが表示されません。

srcに追加するリクエストパラメータを変数ではなく固定値にし、scriptタグをそのまま書き込むと正常表示されることを確認しています。

{%- endstyle -%}

<div class="color-{{ section.settings.color_scheme }} gradient">
  <div class="page-width page-width--narrow section-{{ section.id }}-padding">
    <h2 class="page-title {{ section.settings.heading_size }}">
    </h2>
    <div class="rte">
      <script>
          //formで送った情報を取得し、srcアドレスを作成
          const currentUrl = new URL(location.href)
          const queryString = currentUrl.searchParams
          const srcAdr = '外部アドレス' + queryString.get('id')
          console.log(srcAdr)

          //appendChildで要素を追加
          var sc = document.createElement('script')
          sc.src=srcAdr; //
          console.log(sc)
          var rte = document.querySelector('.rte')
          console.log(rte)
          rte.appendChild(sc)
      </script>
    </div>
  </div>
</div>

{% schema %}

　 

[Qcoltd]

@ななし 様

掲載いただいているコードを試してみました。

'外部アドレス' が誤ってさえいなければ、うまく動作するように見受けられました。

Console.logをお使いになっているということは、Developer Toolsのコンソールをご覧になっていると思うのですが、コンソールに他にはエラーは表示されていないでしょうか？

(キュー田辺)

[ななし]

ご回答ありがとうございます。

コンソールを確認すると以下のようなエラーを見つけました。

「It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.」

エラー文で検索してみると、非同期で読み込まれる外部スクリプトからは、document.write()を実行できない。とのことでした。

この問題はiframeまたreactを利用することで解決できるようです。

ただ質問後、要件が変わり、問題の解決は不要になりました。

必要要件が終わりましたら、時間を見て再度検討しようと考えています。

参考：https://teratail.com/questions/19331

　　　https://qiita.com/kazu_death/items/c3a2397349cf63a8ea68