その23:サイト内のリンク先の更新確認がjavascriptで出来るようにする方法



サイト内のリンク先の更新確認はサーバサイド言語を用いるのが普通ですが
javascriptでもiframeタグとonload,settimeoutなどを使えば実装できます


testiframe.htm

...省略...

<script language="JavaScript" type="text/javascript" src="./javascripts/nas6lib/timer.js"></script>

<script>
var TMan = new N6LTimerMan();  //タイマーマネージャー

var Urls=[["./htm000.htm", "span0000"], ["./prg3d001.htm", "span0013"], ["./tablepinpon.htm", "span0302"], 
["./skincare.htm", "span0340"],["./vroid.htm", "span0341"], ["./fastsdcpu.htm", "span0342"], 
["./5ch.htm", "span0403"], ["./rine.htm", "span0404"], ["./death.htm", "span0405"], 
["./gno.htm", "span0406"], ["./psy.htm", "span0407"], ["./key.htm", "span0408"], 
["./Lwing.htm", "span0409"], ["./reason.htm", "span0410"]];

var step = 0;
var done = false;
var dt = new Date();
var running = true;
var flgif = true;


window.onload=function(){
  var elm = document.getElementById('inlineFrame');
  elm.onload = function(){
    done = true;
    return;
  }
  elm.contentWindow.location.replace(Urls[step][0]);
  step = 0;
  TMan.add();
  Loop(0);  //初回実行
}


function Loop(id) {
  if(done == false){
    if(step < 0){ 
      running = false; return;
    }
    TMan.timer[id].setalerm(function() { Loop(id); }, 50);  //メインループ再セット
    return;
  }
  done = false;
  var elm = document.getElementById('inlineFrame');
  ltdate(new Date(elm.contentDocument.lastModified));
  if(Urls.length - 1 <= step){
    step = -1; running = false; return;
  }
  else step++; 
  if(step < 0){ running = false; return; }
  if(0 <= step){
    elm.onload = function(){
      done = true; return;
    }
    elm.contentWindow.location.replace(Urls[step][0]);
  }
  TMan.timer[id].setalerm(function() { Loop(id); }, 50);  //メインループ再セット
}
function ltdate(lt){
  var msecPerMinute = 1000 * 60;
  var msecPerHour = msecPerMinute * 60;
  var msecPerDay = msecPerHour * 24;

  var dtdate = dt.getTime() / msecPerDay;
  var ltdate = lt.getTime() / msecPerDay;

  var elm = document.getElementById(Urls[step][1]);
  var elm2 = document.getElementById("LTDT");
  if(dtdate < ltdate + Number(elm2.value)){
    elm.style="";
  }
  else {
    elm.style="display:none;";
  }
}

function ltchk(){
  step = 0;
  done = false;
  dt = new Date();

  var elm = document.getElementById('inlineFrame');
  elm.onload = function(){
    done = true;
    return;
  }
  elm.contentWindow.location.replace(Urls[step][0]);
  step = 0;
  if(!running) Loop(0);  //初回実行
  running = true;
}

function ifvisible(){
  var elm = document.getElementById('inlineFrame');
  if(flgif){
    flgif = false;
    elm.style = "display:none;";
  }
  else {
    flgif = true;
    elm.style = "";
  }
}

...省略...

<iframe
  id="inlineFrame"
  title="InlineFrame"
  width="600"
  height="600"
  src="./img/kumausagineko.jpg">
</iframe>
<br>
サイト内の更新確認ができるようにしました<br>
<input type="text" id="LTDT" value="30">日前 <input type="button" onclick="ltchk()"  value="更新チェック"> <input type="button" onclick="ifvisible()"  value="iframe hide"><br>
例えば10000日前とか0日前とかでも試してみてください<br>
<br>
<a href="./htm000.htm">ホームページTips・script.aculo.us、x3dom、WEB3D、WEBGL、HTML5、等の<br>
javascriptサンプル・使い方・入門(samples・examples)</a><span style="display:none;" id = "span0000"> : 更新!</span>
<br>
<a href="./prg3d001.htm">その1:ベクトル</a><span style="display:none;" id = "span0013"> : 更新!</span>
<br>
<a href="./tablepinpon.htm">テーブルピンポン</a><span style="display:none;" id = "span0302"> : 更新!</span>
<br>
<a href="./skincare.htm">美容・美肌・スキンケア・脱ファンデーションの勧め</a><span style="display:none;" id = "span0340"> : 更新!</span>
<br>
<a href="./vroid.htm">mixfool V の VRoid YouTube 活動</a><span style="display:none;" id = "span0341"> : 更新!</span>
<br>
<a href="./fastsdcpu.htm">GPUなしローカルCPUだけで無料無制限でStable Diffusion AI画像生成~FastSD CPU のインストール・使い方~</a><span style="display:none;" id = "span0342"> : 更新!</span>
<br>
<a href="./5ch.htm">創価学会と5チャンネル</a><span style="display:none;" id = "span0403"> : 更新!</span>
<br>
<a href="./rine.htm">輪廻、生まれ変わりを信じるかと魂の善悪</a><span style="display:none;" id = "span0404"> : 更新!</span>
<br>
<a href="./death.htm">死因</a><span style="display:none;" id = "span0405"> : 更新!</span>
<br>
<a href="./gno.htm">グノーシス</a><span style="display:none;" id = "span0406"> : 更新!</span>
<br>
<a href="./psy.htm">緊縛と弛緩と催眠術それとこの世とあの世</a><span style="display:none;" id = "span0407"> : 更新!</span>
<br>
<a href="./key.htm">楽譜キーの変更愛の讃歌初級</a><span style="display:none;" id = "span0408"> : 更新!</span>
<br>
<a href="./Lwing.htm">何でも反対は邪魔なだけ</a><span style="display:none;" id = "span0409"> : 更新!</span>
<br>
<a href="./reason.htm">世界がこんな風になったのは</a><span style="display:none;" id = "span0410"> : 更新!</span>

...省略...



nas6lib/timer.jsの
TMan.timer[id].setalerm(function() { Loop(id); }, 50);
を使っていますが該当箇所を
setTimeout(function() { Loop(id); }, 50);
と書き換えれば大丈夫なはずです

何をしているかというと
var elm = document.getElementById('inlineFrame');
elm.contentWindow.location.replace(Urls[step][0]);
でiframeでリンク先を読み込んで
onloadを実装してdone = true;にします
Loop()では最初にif(done == false)で何もしないことをチェックして
done == trueならばごにょごにょ処理をしてUrlsの次のリンクをstepで指定して読み込んでいます
結構簡単にサイト内のリンク先の更新確認が実装できました


あそういえばこのページをindex.htmで更新確認すると無限ループの危険があるから
更新確認対象から外さなければですね


キャッシュが残ってると正確にできませんけどね


ここ↓が実装例




サイト内の更新確認ができるようにしました
日前  
例えば10000日前とか0日前とかでも試してみてください

ホームページTips・script.aculo.us、x3dom、WEB3D、WEBGL、HTML5、等の
javascriptサンプル・使い方・入門(samples・examples)

その1:ベクトル
テーブルピンポン
美容・美肌・スキンケア・脱ファンデーションの勧め
mixfool V の VRoid YouTube 活動
GPUなしローカルCPUだけで無料無制限でStable Diffusion AI画像生成~FastSD CPU のインストール・使い方~
創価学会と5チャンネル
輪廻、生まれ変わりを信じるかと魂の善悪
死因
グノーシス
緊縛と弛緩と催眠術それとこの世とあの世
楽譜キーの変更愛の讃歌初級
何でも反対は邪魔なだけ
世界がこんな風になったのは







 ■■■ 3Dプログラミング入門講座 ■■■ 
NAS6LIB
ポリゴンテスト解説・x3dom使い方
その1:ベクトル
その2:行列
その3:クォータニオン
その4:基本総復習・実践
その5:応用その1・メッシュアニメーション、動的テクスチャ
その6:応用その2・GLSL、カスタムシェーダー、キーボード、ファイル
その7:応用その3・ゲームプログラミング、タグの動的追加
その8:応用その4・GLSL、シェーダー、その2
その9:物理演算その1・電卓で相対性理論を解く方法
その10:物理演算その2・相対性理論的ニュートン力学
その11:物理演算その3・ケプラー方程式で惑星軌道シミュレーターを作る

その12:物理演算その4・ルンゲクッタ法で作った 相対性理論的ニュートン力学物理エンジンで惑星軌道シミュレーターを作る

その13:経路探索(A*:A-STAR)&巡回セールスマン問題 : 巨大サイズ : くろにゃんこ

その14:プログラミングにおける配列テーブルテクニック
その15:javascriptのクラス活用法
その16:透視射影公式テスト

その17:ケプラー方程式カプセルライブラリ使用法
その18:CSVファイル処理
その19:物理演算その5・重力多体問題
その20:同次座標について(3D座標系の基本の基本)
その21:おさらいコモンクラスの宣言
その22:物理エンジンライブラリ解説(ケプラー方程式・ルンゲクッタ・相対論的万有引力)
その23:サイト内のリンク先の更新確認がjavascriptで出来るようにする方法
その24:グレゴリオ暦日付計算


 ■■■ THREE.JSプログラミング講座 ■■■ 
THREE.JSテスト解説・THREE.JS使い方
THREE.JS examplesをいじってみた(フレネル反射透過シェーダー)

THREE.JS (半透明シェーダー)

THREE.JS 3D演算で必要な計算(具体例)★とても重要★
THREE.JS THREE-VRM をいじってみた



<<prev 物理エンジンライブラリ解説 : グレゴリオ暦日付計算 next>>






戻る