質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.62%

  • JavaScript

    15875questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Ajax

    1064questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

  • Three.js

    108questions

    Three.jsはWebGLをサポートしているJavaScriptの3D描画用ライブラリです。

  • WebGL

    79questions

    WebGL(ウェブジーエル)は、ウェブブラウザで 3次元コンピュータグラフィックスを表示させるための標準仕様です。

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

解決済

回答 4

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 762

mathc2b

score 2

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の仕組みの理解に近づく上で非常に参考になりました。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • mts10806

    2017/09/22 11:24

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

    キャンセル

  • kei344

    2017/09/22 12:05

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

    キャンセル

  • mathc2b

    2017/09/22 14:01

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

    キャンセル

回答 4

checkベストアンサー

+2

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/09/23 09:21

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

    キャンセル

0

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

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);

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

element.innerHTML = ajax.responseText;

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

グローバルにオブジェクトを持ち、ページごとに読み込むスクリプトはそのオブジェクトのプロパティに関数を登録。ページ切り替えのタイミングでイベント処理などで使われている関数(リスナに登録されている関数)を全て開放し、その上でグローバルに登録したプロパティ自体を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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.62%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    15875questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Ajax

    1064questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

  • Three.js

    108questions

    Three.jsはWebGLをサポートしているJavaScriptの3D描画用ライブラリです。

  • WebGL

    79questions

    WebGL(ウェブジーエル)は、ウェブブラウザで 3次元コンピュータグラフィックスを表示させるための標準仕様です。