掲示板/JavaScript質問板/過去ログ/一覧/ 更新日の自動会得ＪＳ

0 名前：はな： 2006/08/29（火） 18:33 ID:fXnL3zQw: ＪＳで、更新日を自動的に変更しようと思い、
http://www.tagindex.com/javascript/time/update2.html
で使われている、ＪＳを使ったのですが、
そのＪＳを貼り付けたページを更新しない場合自動会得されません。
ページＡ，Ｂ，Ｃのどれかを更新すれば、ページＡに最新更新日が表示されるような、
ＪＳはないのでしょうか。
そのようなサンプルを探しているのですが、見つかりません。

1 名前： いなづき ： 2006/08/29（火） 18:33 ID:IdMli4//: まぁ姑息な手段でよければ、無駄に重くなりますが、サイズ0のiframeを使ってＢ、Ｃも読み込んでしまえばいいかと。。

・ＡにＢとＣのページをiframeで読み込む。
<iframe width="0" height="0" src="b.html" name="b"></iframe>
<iframe width="0" height="0" src="c.html" name="c"></iframe>
とか

・ＢとＣのページでそれぞれ最終更新日時を取得して変数に入れておく。
var lastup = new Date(document.lastModified);
var update = Date.parse(lastup);
とかをＡ，Ｂ，Ｃにこの2行を入れておく。

・で、ＡでonloadでＡ，Ｂ，Ｃを比較して一番新しいものの日時を表示するようにする。
この場合でいうと、update と parent.b.update と parent.c.update の変数を比較して
新しいもの（数値の大きいもの）の日時表示させる。

2 名前：はな： 2006/08/29（火） 18:33 ID:fZTJWa4V: これだと、実際にB,Cが表示されていないのに、Aに最新更新日が表示されますね。
関数の比較のやり方がよくわかりません。
var lastup = new Date(document.lastModified);
の値を比較すれば、いいのだと思いますが、比較させるためのスクリプトがよくわかりません。
今の状態では、比較スクリプトを入れてませんが、A更新したため最新のものが表示されています。

3 名前： いなづき ： 2006/08/29（火） 18:33 ID:IdMli4//: うーん、lastupでは無く、updateです。良く見てください。
Ａ，Ｂ，Ｃの最終更新日時（1970/1/1からの通算秒）を代入した変数の
update と parent.b.update と parent.c.update についてはわかります？
で、この３つの変数のうち一番大きいものを取得すればいいのですが。。。
やり方はいろいろあるでしょうけど。

// 3つの変数を配列に
var arr = new Array(update, parent.b.update, parent.c.update);
// sortする
arr = arr.sort();
// 大きい順にするためreverse
arr = arr.reverse();

で、あなたの例示したサンプルスクリプトでいうと
lastup.setTime(arr[0]);
をしてから、
lastup.getYear(), lastup.getMonth() ... 等を実行すればいいと。

4 名前： ぷぅどん ： 2006/08/29（火） 18:33 ID:/kq0HzpI: >そのＪＳを貼り付けたページを更新しない場合自動会得されません。
と、おっしゃってると言うことは自分でページ更新を行わずに取得したいってことですよね？

onloadを付けて時刻比較の関数（自分で作ったもの）を呼び出すだけでは自分でページ更新しないと日付が取得できないので

<body onload="setTimeout(location.reloard(),180000)">　//ページ読み込み後から３分毎に更新

みたいにタイマーをセットするといちお自動で日付が取得できます。
ただ、あまりに時刻間隔を短くするとページがしょっちゅう更新されてかなり見にくいページになってしましますが・・・
私もあまり詳しくないのですが、違う言語を使ったほうがいいかもしれませんね。
（何を使ったらいいかは私も詳しくないので他の方フォローをお願いしますm(__)m）

あと、もしonload（時刻比較の関数を呼び出すための）を使うならbodyタグではなく、Ｃのページを読み込むiframeタグにつけたほうがいいです。bodyタグにつけてしまうとＣの更新日を取得する前に時刻比較をしてしまいます。

5 名前： いなづき ： 2006/08/29（火） 18:33 ID:IdMli4//

>>4

> あと、もしonload（時刻比較の関数を呼び出すための）を使うならbodyタグではなく、
> Ｃのページを読み込むiframeタグにつけたほうがいいです。
> bodyタグにつけてしまうとＣの更新日を取得する前に時刻比較をしてしまいます。

そうなります？
なら以下サンプルです。(^^; これで試してみてください。
iframeのB及びCから変数が読み込めなかったらalert出すようにしておいたけど、alert出ます？？？

a.html

<html>
<head><title>test sample a.html</title>
<script type="text/javascript">
<!--
var lastup = new Date(document.lastModified); 
var update = Date.parse(lastup);

function test(){
	if(typeof(parent.b.update)=="undefined"){
		alert("Ｂの更新日時が読み込まれていません");
		return false;
	}else if(typeof(parent.c.update)=="undefined"){
		alert("Ｃの更新日時が読み込まれていません");
		return false;
	}
	var arr = (new Array(update, parent.b.update, parent.c.update)).sort().reverse(); // ３つの変数を配列にして降順にソート
	lastup.setTime(arr[0]); // lastupにA,B,Cの一番新しい更新日時をセット
	var weeks = new Array('日','月','火','水','木','金','土');
	var year = lastup.getYear(); // 年 
	var month = za(lastup.getMonth() + 1); // 月 
	var day = za(lastup.getDate()); // 日 
	var week = weeks[ lastup.getDay() ]; // 曜日 
	var hour = za(lastup.getHours()); // 時 
	var min = za(lastup.getMinutes()); // 分 
	var sec = za(lastup.getSeconds()); // 秒 
	if(year < 2000) { year += 1900; } 
	// 書き出し
	document.all.updatetime.innerHTML='<B>' + year + '年' + month + '月' + day + '日（' + week + '）'+ hour + '時' + min + '分' + sec + '秒</B>';
}

function za (x){
	if( x < 10 ){ x = "0" + x; }
	return x;
}
//-->
</script>
</head>
<body onload="test()">
<p>更新日時テスト</p>
<p>更新日時は：<span id="updatetime"></span></p>
<iframe src="b.html" width="0" height="0" name="b"></iframe>
<iframe src="c.html" width="0" height="0" name="c"></iframe>
</body>
</html>

b.html

<html>
<head><title>test sample b.html</title>
<script type="text/javascript">
<!--
var lastup = new Date(document.lastModified); 
var update = Date.parse(lastup);
//-->
</script>
</head>
<body>
b.htmlの内容
　　・
　　・
　　・
</body>
</html>

c.html

<html>
<head><title>test sample c.html</title>
<script type="text/javascript">
<!--
var lastup = new Date(document.lastModified); 
var update = Date.parse(lastup);
//-->
</script>
</head>
<body>
c.htmlの内容
　　・
　　・
　　・
</body>
</html>

あと、

> >そのＪＳを貼り付けたページを更新しない場合自動会得されません。
> と、おっしゃってると言うことは自分でページ更新を行わずに取得したいってことですよね？

これは違うと思うけど？　「^そのＪＳを貼り付けたページを更新しない場合・・・」と書いておるで。
だからＡを開いた時に出ればいいのでは？

ま、いずれにしても、これは姑息な手段だから、普通はCGIで取得するべきだと思う。

6 名前： いなづき ： 2006/08/29（火） 18:33 ID:IdMli4//

5>>

すまんです。
a.html に、1行document.allが紛れ込んでいます。夏ボケです。
動かなかったら以下のように。

document.all.updatetime.innerHTML='<B>' + year + '年' + month + '月' + day + '日（' + week + '）'+ hour + '時' + min + '分' + sec + '秒</B>';
　　　　　　↓
document.getElementById("updatetime").innerHTML='<B>' + year + '年' + month + '月' + day + '日（' + week + '）'+ hour + '時' + min + '分' + sec + '秒</B>';

7 名前： ぷぅどん ： 2006/08/29（火） 18:33 ID:/kq0HzpI: bodyタグでもきちんと読み込まれますね。
なんか横やり入れちゃったみたいですいません。。。

もしiframeの読み込みが遅くてエラー（alert）が出るようだったら試してみてください。

8 名前： sevi- ： 2006/08/29（火） 18:33 ID:9J5RKOHs: 横槍だが.

更新日時を取得するだけなら
onloadを用い、全てのフレーム内文書が完全に読み込まれるまで待つ必要は無いのではなかろうか.
読み込み中でもdocument.lastModifiedが取得できたフレーム内文書は読み込み完了前にURLをabout:blankにでもした方が
動作は速くなるような気がするが.

sevi-

9 名前： sevi- ： 2006/08/29（火） 18:33 ID:9J5RKOHs

つまりいなづき氏のコードを流用すると例えば以下のようになるのだが.

<html>
<head><title>test sample a.html</title>
</head>
<body>
<p>更新日時テスト</p>
<p>更新日時は：<span id="updatetime"></span></p>
<iframe src="about:blank" width="0" height="0" name="frame_check"></iframe>
<script type="text/javascript">
<!--
var list_lastModifiead = new Array();
var list_checkURL = ['b.html','c.html'];
var sURL_before;
function za (x){
	if( x < 10 ){ x = "0" + x; }
	return x;
}
function check()
{
	var frame_check = window.frame_check;
	if(frame_check != null && frame_check.location.href != sURL_before && frame_check.document.lastModified)
	{
		list_lastModifiead.push(frame_check.document.lastModified);
		if(list_checkURL.length == 0)
		{
			frame_check.location.href = "about:blank";
			list_lastModifiead.sort();
			var lastup = new Date(list_lastModifiead.pop());
			var weeks = new Array('日','月','火','水','木','金','土');
			var year = lastup.getYear(); // 年 
			var month = za(lastup.getMonth() + 1); // 月 
			var day = za(lastup.getDate()); // 日 
			var week = weeks[ lastup.getDay() ]; // 曜日 
			var hour = za(lastup.getHours()); // 時 
			var min = za(lastup.getMinutes()); // 分 
			var sec = za(lastup.getSeconds()); // 秒 
			if(year < 2000) { year += 1900; } 
			// 書き出し
			document.all.updatetime.innerHTML='<B>' + year + '年' + month + '月' + day + '日（' + week + '）'+ hour + '時' + min + '分' + sec + '秒</B>';
			return;
		}
		sURL_before = frame_check.location.href;
		frame_check.location.href = list_checkURL.pop();
	}
	window.setTimeout(check, 1);
}
if(list_checkURL.length > 0)
{
	sURL_before = frame_check.location.href;
	window.frame_check.location.href = list_checkURL.pop();
	check();
}
//-->
</script>
</body>
</html>

10 名前： sevi- ： 2006/08/29（火） 18:33 ID:PQukhZTw: ぬ.変数 list_lastModified の綴りを間違えた.
更に自身の更新日時を入れるのも失念していたようだ.

var list_lastModified = [document.lastModified];

11 名前： いなづき ： 2006/08/29（火） 18:33 ID:IdMli4//: おおお、なるほど。。。
sevi-さん勉強になります。
iframe1つでページ読み替えていくし、これならa.htmlだけにしか記述必要無いし、しかも早いや。
私は勘違いだらけだ。。(^^;
うーん。勉強になりました。(^^)

12 名前：はな： 2006/08/29（火） 18:33 ID:fZTJWa4V: ありがとうございます。
CGIは、あがることはあがるけど、以前内部サーバーエラーを連発したため、いろんな方に迷惑かけた経験が。
そのときは、大変なとことにはならなかったけど、控えるようにと言われてしまった。
まったく更新もしていなにのに更新日を更新させるわけでなく、どれかを更新したら、そのページに出るということです。
最終的なスクリプト部分は、こうなるってことですよね。
<script type="text/javascript">

</script>
何時何分何秒まで出さない場合は、このソースでいいのですか？

13 名前：はな： 2006/08/29（火） 18:33 ID:fZTJWa4V: 上記のものでは、エラーが出たので、
自己修正です。（まだUPしてません）
var list_lastModified = new Array(),[document.lastModified];//これでOKですか？
var list_checkURL = ['b.html','c.html'];
var sURL_before;
function za (x){
if( x < 10 ){ x = "0" + x; }
return x;
}
function check()
{
var frame_check = window.frame_check;
if(frame_check != null && frame_check.location.href != sURL_before && frame_check.document.lastModified)
{
list_lastModified.push(frame_check.document.lastModified);
if(list_checkURL.length == 0)
{
frame_check.location.href = "about:blank";
list_lastModified.sort();
var lastup = new Date(list_lastModifiead.pop());
var weeks = new Array('日','月','火','水','木','金','土');
var year = lastup.getYear(); // 年
var month = za(lastup.getMonth() + 1); // 月
var day = za(lastup.getDate()); // 日
var week = weeks[ lastup.getDay() ]; // 曜日
if(year < 2000) { year += 1900; }
// 書き出し
document.all.updatetime.innerHTML='<B>' + year + '年' + month + '月' + day + '日（' + week + '）'</B>';
return;
}
sURL_before = frame_check.location.href;
frame_check.location.href = list_checkURL.pop();
}
window.setTimeout(check, 1);
}
if(list_checkURL.length > 0)
{
sURL_before = frame_check.location.href;
window.frame_check.location.href = list_checkURL.pop();
check();
}

14 名前： sevi- ： 2006/08/29（火） 18:33 ID:PQukhZTw

ん.こうかな.

<html>
<head><title>test sample a.html</title>
</head>
<body>
<p>更新日時テスト</p>
<p>更新日時は：<span id="updatetime"></span></p>
<iframe src="about:blank" width="0" height="0" name="frame_check"></iframe>
<script type="text/javascript">
<!--
var list_lastModified = [document.lastModified];
var list_checkURL = ['b.html','c.html'];
var sURL_before;
function za (x){
	if( x < 10 ){ x = "0" + x; }
	return x;
}
function check()
{
	var frame_check = window.frame_check;
	if(frame_check != null && frame_check.location.href != sURL_before && frame_check.document.lastModified)
	{
		list_lastModified.push(frame_check.document.lastModified);
		if(list_checkURL.length == 0)
		{
			frame_check.location.href = "about:blank";
			list_lastModified.sort();
			var lastup = new Date(list_lastModified.pop());
			var weeks = new Array('日','月','火','水','木','金','土');
			var year = lastup.getFullYear(); // 年 
			var month = za(lastup.getMonth() + 1); // 月 
			var day = za(lastup.getDate()); // 日 
			var week = weeks[ lastup.getDay() ]; // 曜日 
			// 書き出し
			document.getElementById("updatetime").innerHTML='<B>' + year + '年' + month + '月' + day + '日（' + week + '）</B>';
			return;
		}
		sURL_before = frame_check.location.href;
		frame_check.location.href = list_checkURL.pop();
	}
	window.setTimeout(check, 1);
}
if(list_checkURL.length > 0)
{
	sURL_before = frame_check.location.href;
	window.frame_check.location.href = list_checkURL.pop();
	check();
}
//-->
</script>
</body>
</html>

15 名前： sevi- ： 2006/08/29（火） 18:33 ID:PQukhZTw: 注意点だが、当該コードはbody内に配置した更新日時確認用のiframeの直後に記述するという事である.
（別にヘッダ部に関数化してもいいがその場合は呼び出し用のコードは同じようにiframe直後に記述する事）
そうする事により最も早く処理が完了する事が期待できる.

更新日時を確認する対象ページを増やす場合は
var list_checkURL = ['b.html','c.html'];
の値を増やせば良い(各値はコーデーションで囲い、値同士をカンマで区切る事)

16 名前：はな： 2006/08/29（火） 18:33 ID:fZTJWa4V: 成功しました。
ありがとうございました。
今までは、ほかのページを更新していながら、TOPページを更新しない場合、更新日の変更を忘れがちでした。
頻繁に更新するページのURLを並べておくことにします。
できでは、サーバー全体のHTMLファイルを対象にしたいのですが、あまり更新しないページを更新したときは手動で対応することにします。

17 名前： sevi- ： 2006/08/29（火） 18:33 ID:PQukhZTw

蛇足：
更に改造して外部ファイル化し、呼び出しコード部分をスクリプト要素のみで可能にしてみた.
これにより、CGIカウンターのような具合で取り扱う事が可能となると思われる.

index.html
---------------
<html>
<head><title>test sample a.html</title>
</head>
<body>
<script type="text/javascript" src="ck_lastModified.js?file=b.html,c.html&addme=true"></script>
<script type="text/javascript" src="ck_lastModified.js?file=table.htm&addme=false"></script>
</body>
</html>



ck_lastModified.js
--------------------
function ck_lastModified()
{

	var node_frame = document.createElement("iframe");
	node_frame.setAttribute("name", "node_frame");
	node_frame.setAttribute("src", "about:blank");
	node_frame.setAttribute("width", "0");
	node_frame.setAttribute("height", "0");
	var nodes_script = document.getElementsByTagName("script");
	var node_script = nodes_script[nodes_script.length-1];
	node_script.parentNode.insertBefore(node_frame, node_script);
	var frame_check = window.frames[window.frames.length-1];

	var list_lastModified = new Array();
	var list_checkURL = new Array();
	var sURL_script = node_script.getAttribute("src");
	var list_args = sURL_script.substr(sURL_script.indexOf("?")+1).split("\&");
	var list_arg;
	for(var i=0; i<list_args.length; i++)
	{
		list_arg = list_args[i].split("=");
		if(list_arg.length != 2)
			continue;
		switch(list_arg[0])
		{
			case "file":
				list_checkURL = list_arg[1].replace(/\s/g, "").split(",");
				break;
			case "addme":
				if(list_arg[1].replace(/\s/g, "").toLowerCase() == "true")
					list_lastModified.push(document.lastModified);
				break;
		}
	}
	
	var sURL_before;
	
	function za (x)
	{
		if( x < 10 ){ x = "0" + x; }
		return x;
	}
	
	function check()
	{
		if(frame_check != null && frame_check.location.href != sURL_before && frame_check.document.lastModified)
		{
			list_lastModified.push(frame_check.document.lastModified);
			if(list_checkURL.length == 0)
			{
				frame_check.location.href = "about:blank";
				list_lastModified.sort();
				var lastup = new Date(list_lastModified.pop());
				var weeks = new Array('日','月','火','水','木','金','土');
				var year = lastup.getFullYear(); // 年 
				var month = za(lastup.getMonth() + 1); // 月 
				var day = za(lastup.getDate()); // 日 
				var week = weeks[ lastup.getDay() ]; // 曜日 
				// 書き出し
				var node_b = document.createElement("b");
				node_b.appendChild(document.createTextNode(year + '年' + month + '月' + day + '日（' + week + '）'));
				node_frame.parentNode.insertBefore(node_b, node_frame);
				node_frame.parentNode.removeChild(node_frame);
				return;
			}
			sURL_before = frame_check.location.href;
			frame_check.location.href = list_checkURL.pop();
		}
		window.setTimeout(check, 1);
	}
	if(list_checkURL.length > 0)
	{
		sURL_before = frame_check.location.href;
		frame_check.location.href = list_checkURL.pop();
		check();
	}
}
ck_lastModified();

18 名前：はな： 2006/08/29（火） 18:33 ID:fXnL3zQw: さっききたら、解決してるのにレスついてましたね。
こっちにする利点ってなにかあるのですか？
始めのスクリプトが長かったのでのＪＳ部分のみを外部ファイル化して使っています。
２～３行で収まるスクリプトは直接ＨＴＭＬファイルに書き込むことが多いのですが、
長いものは外部ファウル化することが多いので、けっこうなれているので。
余談ですが、複数のＨＴＭＬファイルで同じＪＳを使いたい場合やレンタル掲示板やブログのスキンなどを作る場合、こって作ったＨＴＭＬファイルで、ＨＴＭＬファイルをこれ以上複雑にしたくないときなどに役立ちますよね。

19 名前： sevi- ： 2006/08/29（火） 18:33 ID:PQukhZTw: 最後に提出したものの利点を列挙すると、

１．更新日時を表示したい箇所に
<script type="text/javascript" src="ck_lastModified.js?file=b.html,c.html&addme=true"></script>
を配置するだけで済む(iframe等はコード内で自動作成＆破棄されるので記述する必要が無い)

２．一文書内に複数配置出来る(使用される変数名等が衝突しないように修正してある)

３．スクリプトを埋め込んだ文書自身の更新日時を含めるか否か指定可能（にした）

これらにより、更新日時を確認するファイルグループを設け、細かく表示する事が容易.
例：
雑記：～～～日更新
日記：～～～日更新

興味が沸いたので蛇足であったが使い勝手を向上させてみた次第だ.