javascriptでsrc内に変数を用いたい

以下のようなコードがあります。

<script src="https://example.com/1/?code=" id="aaa"></script>
<script src="https://example.com/2/?code=" id="aaa"></script>
<noscript><img src="https://example.com/img/aaa/?code=" width="1" height="1" alt=""></noscript>

上記のcodeに変数を入れたいと思い、以下を参考にコードを書いてみました。
https://bit.ly/3pB19l4

<script>var hoge = abc;</script>

<script src="'https://example.com/1/?code='+ hoge" id="aaa"></script
<script src="'https://example.com/2/?code='+ hoge" id="aaa"></script>
<noscript><img src="'https://example.com/img/aaa/?code='+ hoge" width="1" height="1" alt=""></noscript>

しかし、どうやっても読み込むことができず、何がおかしいのかお手上げ状態となっております。

どの部分がおかしいのかご教授いただければ幸いです。
よろしくお願い致します。

行動規範の内容に同意します

回答3件

ベストアンサー

【追記】
<noscript>について、「<noscript>はJavaScriptが無効な環境で表示されるので、imgを追加するのは無意味ではないか」とご指摘をいただきました。
そのとおりです。コードと説明を修正しました。

<script src="'https://example.com/1/?code='+ hoge" id="aaa"></script>はHTMLであり、"'https://example.com/1/?code='+ hoge"もまたHTMLの一部分です。JavaScriptとして実行されるわけではありません。

ご質問にある参考文献はVueというライブラリを用いてHTMLを動的に生成しているのでこのようなことができますが、ご質問から察するにgara-pagosuさんはそういったライブラリを使っていないのではないかと思います。

その場合は、以下のようにJavaScriptで動的に<script>要素を作ってドキュメントに追加すれば読み込むことができます。

スクリプトを動的に読み込む方法 | JavaScript プログラミング解説

imgタグについては<noscript></noscript>内の要素をJavaScriptでは操作できないので（JavaScriptが無効の環境向けですからね……）、サーバーサイドでHTMLを生成するなどの方法をとりましょう。

html
1<script>
2  var hoge = "abc";
3
4  // script要素を作る関数
5  function createScript(src, klass) {
6    var script = document.createElement("script");  // script要素を作る
7    srcipt.classList.add(klass);                    // idではなくclassを追加（下記の説明を参照）
8    script.src = src;                               // srcを設定
9    return script;
10  }
11
12  // ドキュメントが完全に読み込まれてから
13  document.addEventListener('load', () => {
14    // script要素を作ってbodyに追加
15    var s1 = createScript('https://example.com/1/?code=' + hoge, "aaa");
16    document.body.appendChild(s1);
17    var s2 = createScript('https://example.com/2/?code=' + hoge, "aaa");
18    document.body.appendChild(s2);
19  });
20</script>

なお、var hoge = abc;のabcは変数名ではなく文字列でしょうから、"abc"に修正しました。
また、HTMLではid属性はドキュメント内で一意でなければなりません。言い換えると、ドキュメント内で同じidは2つの要素につけることができないのです。そのため、id="aaa"はclass="aaa"となるよう変更しました。

クライアントサイドでスクリプトを動的に読み込む方法を書いておいて何なんですが、他の方も回答されているように今回のケースではサーバーサイドでHTMLを動的に生成する方法がよいのではないかと思います。

ご参考まで。

投稿2021/10/25 07:29

編集2021/10/25 08:15

fj68

総合スコア752

kei344

2021/10/25 08:04

noscript要素内はスクリプトが実行されない場合に表示されるので、スクリプトでの書き換えは無意味ではありませんか？

fj68

2021/10/25 08:06

ご指摘ありがとうございます。確かにそのとおりですね。編集させていただきます！

gara-pagosu

2021/10/25 09:19

詳しくご説明ありがとうございます！ script側は、ご掲示いただいたコードで対応させていただこうと思います！ちなみにですが、src読み込み先の事情で、どうしてもIDでなければならないのですが、その場合は function createScript(src, idname) { var script = document.createElement("script"); script.setAttribute(id,idname); script.src = src; return script; } と置き換えれば良かったでしょうか。

fj68

2021/10/25 10:49 編集

script.setAttribute("id", idname);もしくはscript.id = idnameですね。頑張ってください！

gara-pagosu

2021/10/25 14:25

おお！なるほど！重ね重ねありがとうございます！多謝！！

行動規範の内容に同意します