Javascript、Ajaxの動的更新に関する質問

Question

Javascriptに関する質問です。
Javascriptを動的に更新する方法を探しています。具体的には、ボタンをクリックするとリロードされバックグラウンドからキャッシュ？が消えるような仕組みです。
webブラウザのリロードボタンのように、ページ全体を更新するのではなく、scriptタグ内のjsのみを更新（初期化）することは可能なのでしょうか。

一応試したことを下記に記載しております。

function ajaxUpdate(url, element) {
    url = url + '?ver=' + new Date().getTime();
    var ajax = new XMLHttpRequest;
    ajax.open('GET', url, true);
    ajax.onload = function () {
        element.innerHTML = ajax.responseText;
    };
    ajax.send(null);
}
window.addEventListener('load', function () {
    var url = "contents.html";
    var div = document.getElementById('contents');
    setTimeout(function () {
        ajaxUpdate(url, div);
    }, 5000);
});

上のコードの説明ですが、jsを直接更新する方法が分からなかったので、

<div id="contents">
    <script>
        //任意のコード
    </script>
</div>

HTMLのcontents部分にjsをインラインで記載し、5秒後ajaxで更新するという方法を試してみたのですが初期化されませんでした。（コンソールを開くと初期化されておらず、スクリプトは動いている状態でした。）

下記リンクに、実際に実装されているサイトがありましたので念のため添付しました。
http://codedoodl.es/_/yiwenl/shading-particles/
丸い矢印ボタンを押すと、ページ全体はリロードされませんがwebgl(three.js)部分は最初から始まっています。

この仕組みが分かる方いらっしゃいましたらご教授よろしくお願い致します。

【追記】
・上記のシステムを採用したいサイトの内容に関して
WebGL(Three.js)で作成したファイルが複数あり、1ページに1ファイルを割り当てています。topからWebGLを表示する下層ページへ遷移する際は、通常のリンクではなく、Ajaxによる非同期通信で更新します。
その際に各ページで表示したjsはリンクではないため遷移しても起動したままとなりますので、どんどん動きが遅くなってしまいます。（通常のリンクでしたら干渉しませんのでこのような問題は起きないのですが）
その解決策として、ページを離れた際にjsを無効化する処理を施そうと考えました。（完全に取り除くという解釈でよろしいかと思います）
ただ、jsを取り除くという行為があまり一般的に行われていないようでしたら再考の必要がありそうです。

あまりjsに関して詳しくなく、拙い質問内容で失礼しました。
また、その他の解決策を思い当たる方いらっしゃいましたらご教授願います。
よろしくお願いします。

**
【追記※無事解決いたしました！】
みなさんたくさんのコメントを頂き、本当にありがとうございました。
私の稚拙な質問に対し、丁寧にお答えいただき、また質問方法に関してご指南くださり大変感謝しております。
今回ベストアンサーには問題の解決に直接的に至った方を採用させていただきましたが、その他のご回答もjsの仕組みの理解に近づく上で非常に参考になりました。

Comments

[m.ts10806]

jsを初期化しているというのではなくて初期化の関数をloadしてるだけのように思いますが、そういうことではないですか？

[mathc2b]

つまり、配列の値を初期状態に戻しているということなのでしょうか。でしたら参考にならずすいません。私の目的としてはjs自体の初期化です。

[m.ts10806]

「js自体の初期化」が具体的にどのようになったら正解としたいのかが良く分かりません。回答にもあるようにふわっとした質問にはふわっとした感じの回答しかつきません。

[kei344]

「scriptで読み込んだjsファイルで定義した変数や関数全てを無かった事にしたい」ということでしょうか。もしそうであるとするならば、どういうことを実現したくてそのような方法を捜されているのかを具体的に書かれたほうが良いと思います。

[mathc2b]

分かりづらい内容で失礼しました。はい、jsをなかったことにする処理を考えています。

Answer 1

参考に提示していただいたサイトは、iframeを使っていますね。
外側のページは確かに変わっていませんが、そのiframeの中に表示されているHTMLファイルが移動しています。つまり、実は子となるウィンドウが存在しており、その子ウィンドウの中が丸ごとごっそりページが切り替わってるわけです。ページの読み込みの最中は、その上に親ページ側からcanvasやらdivやらを重ねて、読み込み中をうまくごまかしているようです。
この仕組みであれば、ページは実は遷移しているので、読み込んだページで使われたjsはきれいさっぱりなくなり、重くなることもありません。
また、iframeの中のページのjavascriptの値を読み込んだり、関数を実行する仕組みもあります。もしサンプル元のページと同じようなことを実現したい、というのであれば、iframeを使う方法を検討なされてみてはいかがでしょう。

Comments

[mathc2b]

ありがとうございます！
iframeを使うという方法で無事解決しました。
こんな簡単な方法があったのですね。私の提示したサイトでしたのに、検証不足で大変ご迷惑おかけしました。
納期が迫っていたものでして、大変助かりました、本当にありがとうございます。

Answer 2

グローバルにオブジェクトを持ち、ページごとに読み込むスクリプトはそのオブジェクトのプロパティに関数を登録。ページ切り替えのタイミングでイベント処理などで使われている関数（リスナに登録されている関数）を全て開放し、その上でグローバルに登録したプロパティ自体をdeleteする、とかどうでしょう。

大量のjsを読み込むようなことをあまりしないので頓珍漢なことを書いているかもしれませんが･･･。

（すみませんが、未検証です）

// root.js
const script_base = {};
function delete_page( page ) { // ページを削除するときに呼ぶ
    script_base[ page ].destroy(); // 終了処理
    delete script_base[ page ]; // プロパティを削除
    // script_base[ page ] = null; // これでもいけるのかも
};

// page1.js
if ( !script_base[ 'page1' ] )  {
    script_base[ 'page1' ] = { /* something */ };
    script_base[ 'page1' ].init(); // 開始処理
}

【メモリーリークパターンを理解する - babu_babu_babooのごみ箱】
http://d.hatena.ne.jp/babu_babu_baboo/20100417/1271465430

【JavaScriptで起こるメモリリークのパターン - EagleLand】
https://1000ch.net/posts/2017/javascript-memory-leak.html

【JavaScriptのメモリ消費について】
http://zoo-of-blue-and-red.blogspot.jp/2014/09/javascript.html

Answer 3

element.innerHTML = ajax.responseText;

上記のコードは、以下の記事の「動的にscriptタグを生成、追加する方法」セクションのダメな例のような感じがします。

JavaScriptで動的にscriptタグを差し込んだり、実行する方法
http://tech-blog.tsukaby.com/archives/894

その記事に書いてあるように、appendChild メソッドを利用するとどうなりますか？（未検証・未確認です。ハズレだったらすみません）

Answer 4

状況がよくわかりませんが、時系列的に処理されるので
任意の処理は上書きされると思いますが

function test(){console.log("test1");}
test();
setTimeout(function(){window.test=function(){console.log("test2");}},1000);
setTimeout(function(){test()},2000);
setTimeout(function(){window.test=null},3000);
setTimeout(function(){test()},4000);