teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

2

内容を修正

2021/10/25 08:15

投稿

fj68
fj68

スコア752

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

内容を修正・追記

2021/10/25 08:15

投稿

fj68
fj68

スコア752

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
- 同様に、`img`も動的追加します。
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
  ```