JavaScript リロード DIV
-
JavaScript で
.load()のwindow.location.hrefを使用してdivをリロードする -
JavaScript で
" #id > *"を.load()とともに使用してdivをリロードする -
JavaScript で
window.setInterval()を使用してdivを更新する
JavaScript で div 要素をリロードするための 1 行のコーディング規則を見つけるのは困難です。リロードまたは更新する一般的な方法は、onload 機能を調整するか、Web ページ全体をトリガーすることです。
Web ページがかさばる場合、これは必ずしも好ましいとは限りません。多くの場合、特定のセクションを更新するためのアジャイルな方法が必要です。
この問題を解決するために、Web ページの現在のパスを取得して div の ID を追加する jQuery .load() 関数のみに依存します。これは、Web ページコンテンツ内の div の場所を表す id を具体的に追加して更新するためです。
私たちが従うもう 1つの方法は、div を更新したい後の期限を追跡することです。この場合、ユーザー定義の期限付きと連携するために、HTML の単純な動的属性が必要になります。
これは jQuery の .load() ほど専用ではないように思われるかもしれませんが、JavaScript を介して比較的簡単に処理できます。コードブロックにジャンプしましょう。
JavaScript で .load() の window.location.href を使用して div をリロードする
この例で最も重要なセグメントは、ターゲットの div インスタンスを取得する id 属性です。Web ページ全体ではなく、div を使用して Web ページのその部分をロードします。
最初に、時間枠を計算するための span タグが付いた div があります（正常に機能しているかどうかを確認するため）。後で、div（#here）のインスタンスを取得して、load() 関数を使用します。
.load() 関数では、パラメーターは window.location.href になります。これは、現在の Web サイトのパスを参照します。そして、#here``id に関連付けられて、宛先を割り当てて更新します。
コードスニペット：
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<div>
<div id="here">dynamic content <span id='off'>9</span></div>
<div>ABC</div>
</div>
<script>
$(document).ready(function(){
var counter = 9;
window.setInterval(function(){
counter = counter - 3;
if(counter>=0){
document.getElementById('off').innerHTML=counter;
}
if (counter===0){
counter=9;
}
$("#here").load(window.location.href + " #here" );
}, 3000);
});
</script>
出力：
ここでは、3 秒ごとにカウンターが変更されます。スクリーングラブにより、タイミング比は少なくとも 3 秒になる可能性がありますが、プロセスが機能していると推測されます。
JavaScript で" #id > *"を .load() とともに使用して div をリロードする
このセクションでは、再び .load() 関数を使用し、今回はパラメーターとして" #here > *"を渡します。 #id を示す前にスペースを追加することを検討してください。
この全体的なセクションは、説明されている他の例のように実行されます。
コードスニペット：
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<div>
<div id="here"> again dynamic content <span id='off'>3</span></div>
<div>ABC</div>
</div>
<script>
$(document).ready(function(){
var counter = 3;
window.setInterval(function(){
counter--;
if(counter>=0){
document.getElementById('off').innerHTML=counter;
}
if (counter===0){
counter=3;
}
$("#here").load(" #here > *");
}, 1000);
});
</script>
出力：
JavaScript で window.setInterval() を使用して div を更新する
ここでは、div を取得し、その id 属性を設定します。スクリプトセクションでは、カウントクロックをアクティブにします。
この例は、一定の時間が経過した後に Web ページに表示するコンテンツの配列がある良い例です。おそらく、提示する複数の div があり、時間の完全なカウントダウンごとに、配列インデックスを変更します。
したがって、多くのコンテンツを動的に処理する方法があります。
以下の例では、そのような配列データをフェッチしていません。むしろ、クロックサイクルを開始したばかりです。より良いプレビューのためにコードフェンスをチェックしましょう。
<div>
The DIV below will refresh after <span id="cnt" style="color:red;">7</span> Seconds
</div>
</body>
<script>
var counter = 7;
window.setInterval(function () {
counter--;
if (counter >= 0) {
var span;
span = document.getElementById("cnt");
span.innerHTML = counter;
}
if (counter === 0) {
counter = 7;
}
}, 1000);
</script>
出力：
