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の仕組みの理解に近づく上で非常に参考になりました。
回答4件
あなたの回答
tips
プレビュー