html内に埋め込んだJSを切り替え

前提・実現したいこと

HTML内にJavaScriptを埋め込んで表示します。
この時、JS内で他のJSにリンクさせた時にJSだけを表示切替する方法を探しています。

該当のソースコード

(index.html)

HTML
1<body>
2<h1>TITLE</h1>
3<p>
4detail
5</p>
6<script src="./001.js"></script>
7</body>

(001.js)

js
1document.write('<p>detail</p>')
2document.write('<a href="./002.js">Link</a>')

(002.js)

js
1document.write('<p>detail</p>')

上記コードの場合、ブラウザにそのままJSファイルがテキストの状態で表示されてしまいます。

どのように作成したらいいのか分かりません。
なるべくJavaScriptで作りたいと思っています。できないのであれば、その旨を教えていただければ幸いです。初心者なので、わからず、いろいろ探しましたが、リンクの仕方に関しては記載が見当たらなかったのでここでお尋ねさせて頂きました。よろしくお願いします。

・JS内で他のJSにリンクする方法
・JS内でのクリックでHTMLの遷移ができるようにする方法
※２つめは<a>でできることは確認済みです。
ただし、１つめをできるようにする過程で
これが使えなくなるのであれば、2つ目に関しても伺いたいです。

###理想としては・・・
HTML内にiframeで表示した際に別のページに遷移できるのと同じ様にしたいです。
枠などを無くし、見やすいようにJSファイルを使用したいです。
（iframeではなく、JSにしたいのはページによって長さが変わるため、そのページごとに変える必要がない方がいいと思ったためです。）

Zuishin

2020/11/10 23:44

Ajax ということですか？それとも、クリックによってページは遷移し、URL は変わるが、表示される内容は一部を除き同じものにしたいということですか？

Ito_Kazuki_

2020/11/11 07:47

Zuishinさん URLは変わらず、埋め込まれているjsの内容だけが変わるということです。

Zuishin

2020/11/11 07:55

つまり Ajax ですね？

Ito_Kazuki_

2020/11/14 21:45

そうです。

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

回答2件

ベストアンサー

いろいろと学習すべきことを飛ばしているように感じます。
「理想の前に基礎を固めて、その基礎知識を組み立てる」べきです。

リファレンスとしては MDN ウェブ開発を学ぶが詳しいです。

初学者には詳しすぎるかもしれませんので、個人がまとめているサイトのサンプルコードは参考になるかもしれません。

htmlクイックリファレンス

質問者様には難しいことをやろうとしているように感じましたので、以下は「ダメ出し」に感じるかもしれません。

ブラウザにそのままJSファイルがテキストの状態で表示されてしまいます。

ブラウザは JavaScriptソースビューワ として機能しているだけです。

ご質問コードの <script src="./001.js"></script> が解釈され、001.jsが実行された直後、 2行の document.write() で以下のようなHTML文書に変化すると考えます
（マークアップ構造の変化を常に考える）。

html
1<body>
2<h1>TITLE</h1>
3<p>
4detail
5</p>
6<p>detail</p>
7<a href="./002.js">Link</a>
8</body>

このとき、a[href="./002.js"] 部分が、画像ファイル（[href="./test.png"]）だと、マークアップは <a href="./test.png">Link</a> になり、Link をクリックすると、画像ファイルが表示されます。

ブラウザの特徴（挙動から分かる）

原則として HTMLビューワとして機能する。
URLが表示可能な画像の場合は画像ビューワとして機能する。
URLが再生可能な音声ファイルの場合はサウンドプレイヤーとして機能する。
URLが再生可能な映像ファイルの場合はムービープレイヤーとして機能する。

HTML内にiframeで表示した際に別のページに遷移できるのと同じ様にしたいです。

特定の要素以下のマークアップ構造を動的に変更することで対応します
（基本は HTML + CSS で表現し、CSSではできないことをJavaScriptで補います）。

コンテンツの追加（CSSではできないこと）をJavaScriptで行うサンプルコード
（ウィンドウ幅が変わっても、ページの80％幅となるサンプル）

html
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8">
5  <title>読み込みテスト</title>
6  <style>
7    body {
8      width: vw;
9      height: vh;
10      background: whitesmoke;
11    }
12    .content-wrapper {
13      position: relative;
14      width: 80%;
15      margin: 1em auto;
16      background: lightgray;
17    }
18    .detail-content {
19      background: lightsteelblue;
20    }
21    .no-disp {
22      display: none;
23    }
24
25  </style>
26</head>
27<body>
28  <div class="content-wrapper">
29    <section>
30      <p>
31        テスト文字列 テスト文字列 テスト文字列 テスト文字列 テスト文字列 テスト文字列
32        テスト文字列 テスト文字列 テスト文字列 テスト文字列 テスト文字列 テスト文字列
33        テスト文字列 テスト文字列 テスト文字列 テスト文字列 テスト文字列 テスト文字列
34        テスト文字列 テスト文字列 テスト文字列 テスト文字列 テスト文字列 テスト文字列
35        テスト文字列 テスト文字列 テスト文字列 テスト文字列 テスト文字列 テスト文字列
36      </p>
37      <p>
38        テスト文字列 テスト文字列 テスト文字列 テスト文字列 テスト文字列 テスト文字列
39        テスト文字列 テスト文字列 テスト文字列 テスト文字列 テスト文字列 テスト文字列
40        テスト文字列 テスト文字列 テスト文字列 テスト文字列 テスト文字列 テスト文字列
41        テスト文字列 テスト文字列 テスト文字列 テスト文字列 テスト文字列 テスト文字列
42        テスト文字列 テスト文字列 テスト文字列 テスト文字列 テスト文字列 テスト文字列
43      </p>
44    </section>
45    <a href="javascript:;" id="detail">Detail</a>
46  </div>
47  <script>
48    window.addEventListener("DOMContentLoaded", () => {
49
50      document.querySelector("#detail").addEventListener("click", function( evt ){
51        evt.target.classList.add("no-disp");
52        
53        // Ajax で読んでも良い。
54        let paragraphs = [
55          "追加の文字列　追加の文字列　追加の文字列　追加の文字列　追加の文字列　追加の文字列" +
56          "追加の文字列　追加の文字列　追加の文字列　追加の文字列　追加の文字列　追加の文字列" +
57          "追加の文字列　追加の文字列　追加の文字列　追加の文字列　追加の文字列　追加の文字列" +
58          "追加の文字列　追加の文字列　追加の文字列　追加の文字列　追加の文字列　追加の文字列" +
59          "追加の文字列　追加の文字列　追加の文字列　追加の文字列　追加の文字列　追加の文字列",
60
61          "追加の文字列　追加の文字列　追加の文字列　追加の文字列　追加の文字列　追加の文字列" +
62          "追加の文字列　追加の文字列　追加の文字列　追加の文字列　追加の文字列　追加の文字列" +
63          "追加の文字列　追加の文字列　追加の文字列　追加の文字列　追加の文字列　追加の文字列" +
64          "追加の文字列　追加の文字列　追加の文字列　追加の文字列　追加の文字列　追加の文字列" +
65          "追加の文字列　追加の文字列　追加の文字列　追加の文字列　追加の文字列　追加の文字列",
66        ];
67
68        let wrapper = document.querySelector(".content-wrapper");
69        let nextSection = Object.assign(document.createElement("section"), {
70            className:"detail-content"
71          });
72
73        paragraphs.forEach( txt => {
74          let paragraph = document.createElement("p");
75          paragraph.textContent = txt;
76          nextSection.appendChild( paragraph );
77        });
78        wrapper.appendChild( nextSection );
79      });
80
81    });
82  </script>
83</body>
84</html>

a要素のクリックは、デフォルトでは href属性の示すURLへジャンプするので、JavaScriptが必要になります。

最後に、モダンなJavaScript開発で document.write() は余程のことがない限り使いません。

投稿2020/11/11 01:17

AkitoshiManabe

総合スコア5432

Ito_Kazuki_

2020/11/17 08:40

回答いただき、ありがとうございます。一度ベストアンサーに選んだ後で申し訳ありませんが、追加で表示する文字列に関してですが、この部分をHTMLで記述するようにはできないでしょうか。

AkitoshiManabe

2020/11/17 16:36

wrapper.innerHTML += "<p>HTML</p>"; が使えます。回答に挙げたサイトで innerHTML を探してみてください。

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

document.writeを捨てるところから始めてください

JS内で他のJSにリンクする方法

bodyに対してscriptをdomで追加してください
（にしてもdocument.writeはNGです）

投稿2020/11/10 12:54

yambejp

総合スコア114814

yambejp

2020/11/10 12:59

//main.html <script src="001.js"></script> //001.js window.addEventListener('DOMContentLoaded', ()=>{ document.querySelector('body').appendChild( Object.assign(document.createElement('script'),{src:"002.js"}) ); }); //002.js alert('002');

Ito_Kazuki_

2020/11/10 21:54 編集

回答いただき、ありがとうございます。遷移というのは、ページが読み込まれたのと同時に自動で移動することではなく、リンクをクリックした際にページを切り替えるということです。言葉足らずだったかもしれません。すみません。回答のコメントについて軽く調べてみているところなのでもし間違っていたら教えていただけますか。一応コメントのJSを書き込んでみたのですが、できなかったようなので・・・

yambejp

2020/11/11 00:21

そもそもがリンクしてjsを開くという考え方がおかしいですなにか根本的な思い違いがあるのでしょう <a href="./002.js">Link</a> 開くならhtmlファイルです

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

あなたの回答