JavaScript リロード DIV

ページ全体を移動せずに1つのdivを更新するには、安定した対象要素に置き換え用のマークアップを読み込みます。jQueryの.load()を使うと、現在のページをリクエストし、そのレスポンスから対象部分だけを選択できます。別の方法として、window.setInterval()で対象要素の内容を定期的に変更できます。タイマーは処理を予約するだけで、それ自体が内容を取得または更新するわけではありません。

以下のHTML例はブラウザページ用のソースで、この環境では実行していません。jQuery 3.6.0をCDNから読み込むため、ページがライブラリを取得するにはネットワーク接続が必要です。単独のJavaScriptによるメッセージ選択例は実行済みで、表示例のData receivedという出力が得られています。このラベルはコードと同じく英語のままです。この例はブラウザのDOMにアクセスせず、タイマーも待ちません。

jQueryの.load()で現在のページからdivを再読み込みする

コンテンツ用のコンテナーにidを付け、その要素に対して.load()を呼び出します。第1引数には、現在のページのURLであるwindow.location.href、空白、セレクター#hereを組み合わせて指定します。jQueryはそのURLにリクエストを送り、レスポンスから一致する要素を取り出して、既存の対象要素にその内容を挿入します。ページ全体を置き換えず、選択した部分だけを更新できます。取得元のページに対象要素が含まれていること、またページのオリジンとサーバー設定でリクエストが許可されていることが必要です。

jQueryスクリプトを読み込んだブラウザページで、次の例を実行してください。

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<div id="here">This content is loaded again from the current page.</div>
<script>
  $(function () {
    $("#here").load(window.location.href + " #here");
  });
</script>

URLとセレクターを組み合わせる形式は、jQueryの.load()メソッド固有のものです。jQueryがセレクターとリクエストURLを区別できるように、セレクターの前に空白を入れてください。ページのURLにフラグメントが含まれていても、ブラウザはそのフラグメントをHTTPリクエストに含めません。

セレクターでdivの子要素だけを読み込む

URLの後ろに指定するセレクターを使うと、レスポンスからさらに範囲を絞り込めます。" #here > *"では、先頭の空白がURLとセレクターを区切り、#hereが取得元のコンテナーに一致し、>がその直下の子要素を選択します。対象のdiv自体は、挿入するコンテンツとして選ばれません。取得元のコンテナーがラッパーで、対象要素はそのまま残しながら子要素だけを置き換えたい場合に使います。

このページでは、マークアップとセレクターの両方でリテラルなhereというIDを使います。

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<div id="here"><p>First item</p><p>Second item</p></div>
<script>
  $(function () {
    $("#here").load(window.location.href + " #here > *");
  });
</script>

セレクター#here > *が選択するのは直下の子要素であり、コンテナー直下にあるテキストノードは含まれません。すべての子孫要素が必要な場合は、子孫セレクターを意図的に選び、返されるマークアップを考慮してください。

window.setInterval()で一定間隔でdivを更新する

内容を一定の間隔で繰り返し変更するには、window.setInterval()を使います。間隔はミリ秒で指定します。6000ミリ秒ならブラウザは約6秒ごとにコールバックを実行するよう予約しますが、ページが多忙な場合は実行が遅れることがあります。divのtextContentに新しいメッセージを代入するなど、更新処理はコールバック内に記述します。一定回数の変更後やコンポーネントの削除時など、更新を止めるタイミングでwindow.clearInterval()を呼び出してください。

次のブラウザページ用ソースは2つのメッセージを順番に表示し、両方を表示した後に停止します。

<div id="status">Waiting for an update</div>
<script>
  const messages = ["Data received", "Ready for the next request"];
  const status = document.getElementById("status");
  let index = 0;
  const timerId = window.setInterval(function () {
    status.textContent = messages[index];
    index += 1;
    if (index === messages.length) {
      window.clearInterval(timerId);
    }
  }, 6000);
</script>

同じ内容の切り替えを示す、実行可能なJavaScriptの例では、次のコードが各メッセージを順番に選択します。このコードが示すのは選択ロジックです。ブラウザのDOMにはアクセスせず、タイマーも待ちません。

const messages = ["Data received", "Ready for the next request"];
let index = 0;

function nextMessage() {
  const message = messages[index];
  index += 1;
  return message;
}

console.log(nextMessage());

Data received

コールバックがtextContentを更新するため、タイマーによってdivの内容が変わります。別の場所にある数値だけを変更するカウントダウンでは、divのメッセージは更新されません。ページの要件に合わせて、間隔と停止条件を決めてください。