回答編集履歴
2
内容を修正
answer
CHANGED
@@ -40,8 +40,6 @@
|
|
40
40
|
なお、`var hoge = abc;`の`abc`は変数名ではなく文字列でしょうから、`"abc"`に修正しました。
|
41
41
|
また、HTMLでは`id`属性はドキュメント内で一意でなければなりません。言い換えると、ドキュメント内で同じ`id`は2つの要素につけることができないのです。そのため、`id="aaa"`は`class="aaa"`となるよう変更しました。
|
42
42
|
|
43
|
-
正直こういったDOM操作を自前で用意するとなると、ちょっとめんどくさい上にメンテナンスしにくいです。
|
44
|
-
可能であれば、ReactやVue、Svelteといったビューライブラリの採用を検討されるとよいかと存じます。
|
45
|
-
|
43
|
+
クライアントサイドでスクリプトを動的に読み込む方法を書いておいて何なんですが、他の方も回答されているように今回のケースではサーバーサイドでHTMLを動的に生成する方法がよいのではないかと思います。
|
46
44
|
|
47
45
|
ご参考まで。
|
1
内容を修正・追記
answer
CHANGED
@@ -1,3 +1,9 @@
|
|
1
|
+
【追記】
|
2
|
+
`<noscript>`について、「`<noscript>`はJavaScriptが無効な環境で表示されるので、`img`を追加するのは無意味ではないか」とご指摘をいただきました。
|
3
|
+
そのとおりです。コードと説明を修正しました。
|
4
|
+
|
5
|
+
---
|
6
|
+
|
1
7
|
`<script src="'https://example.com/1/?code='+ hoge" id="aaa"></script>`はHTMLであり、`"'https://example.com/1/?code='+ hoge"`もまたHTMLの一部分です。JavaScriptとして実行されるわけではありません。
|
2
8
|
|
3
9
|
ご質問にある参考文献はVueというライブラリを用いてHTMLを動的に生成しているのでこのようなことができますが、ご質問から察するにgara-pagosuさんはそういったライブラリを使っていないのではないかと思います。
|
@@ -6,10 +12,9 @@
|
|
6
12
|
|
7
13
|
[スクリプトを動的に読み込む方法 | JavaScript プログラミング解説](https://so-zou.jp/web-app/tech/programming/javascript/sample/script.htm)
|
8
14
|
|
9
|
-
|
15
|
+
`img`タグについては`<noscript></noscript>`内の要素をJavaScriptでは操作できないので(JavaScriptが無効の環境向けですからね……)、サーバーサイドでHTMLを生成するなどの方法をとりましょう。
|
10
16
|
|
11
17
|
```html
|
12
|
-
<noscript></noscript>
|
13
18
|
<script>
|
14
19
|
var hoge = "abc";
|
15
20
|
|
@@ -21,16 +26,6 @@
|
|
21
26
|
return script;
|
22
27
|
}
|
23
28
|
|
24
|
-
// img要素を作る関数
|
25
|
-
function createImg(src) {
|
26
|
-
var script = document.createElement("img"); // script要素を作る
|
27
|
-
script.width = "1";
|
28
|
-
script.height = "1";
|
29
|
-
script.alt = "";
|
30
|
-
script.src = src;
|
31
|
-
return script;
|
32
|
-
}
|
33
|
-
|
34
29
|
// ドキュメントが完全に読み込まれてから
|
35
30
|
document.addEventListener('load', () => {
|
36
31
|
// script要素を作ってbodyに追加
|
@@ -38,12 +33,6 @@
|
|
38
33
|
document.body.appendChild(s1);
|
39
34
|
var s2 = createScript('https://example.com/2/?code=' + hoge, "aaa");
|
40
35
|
document.body.appendChild(s2);
|
41
|
-
// img要素を作ってnoscriptに追加
|
42
|
-
var noscript = document.querySelector("noscript");
|
43
|
-
if (noscript) {
|
44
|
-
var img = createImg('https://example.com/img/aaa/?code='+ hoge);
|
45
|
-
noscript.appendChild(img);
|
46
|
-
}
|
47
36
|
});
|
48
37
|
</script>
|
49
38
|
```
|