昼と夜でフレームのページを変える


■Q&A

■Question

ぴろあき様へ 2002.4.29.Mon No.3375

【要約】

サンプルの57番を使わして頂いて、昼と夜に壁紙を変えてみようと思ったのですが、上手く動きません。FRAMESET のページで main ぺージのURLにサンプル57番を書き込んだページを指定して、時間によって飛ぶページを指定してみたのですが…

1.html でFRAMEを3つに分割指示し、それぞれ 2.html 3.html 4.html を読み込むようにしました。
そして 4.html に57番のソースを書いて、6時〜18時は5.html、18時〜6時は 6.html を表示させようとしたのですが、6時〜18時になっても 6.html を表示したままなのです(T_T)

■Answer

Re:ぴろあき様へ ぴろあき 2002.5.1.Wed No.3388

【要約】

えーと、

  1. ページに入る(4.html を表示)
  2. 朝5時になったので、6.html にジャンプ
  3. 6時になった
  4. 5.html にジャンプしないよ?

ということでいいんですか?(そうだと仮定します)

57番のスクリプトは 4.html にしか書いてないんですよね。
4.html は、5.html か 6.html へ移る時にアンロードされて綺麗さっぱり消えますから、むしろ変わる方が困ります。
なので、5.html と 6.html にも同じスクリプトを書かないといけません。JavaScript として賢い方法ではないですけどね。

■Question

ぴろあき様へ 2002.5.2.Thu No.3391

【要約】

意図を伝えるのは、ぴろあき様が言う通り【難しい】のですねぇ!
4.html は 5.html と 6.html へ飛ばすの専用ページです。
常に表示させません。朝〜夕は 5.html 夕〜朝は 6.html って具合です。技術的には可能っぽい様ですね☆
なぜ私がやると飛ばないのでしょう???

■Answer

Re:ぴろあき様へ ぴろあき 2002.5.4.Sat No.3394

【要約】

この用途専用で最適化したものをちょっと作ってみたので、よかったら試してみてください。希望と違う部分はあるかもしれないですが…。


■実行結果

実際に動作してますので、6時〜18時と18時〜6時で見比べてみてください。
待ちきれない時は、パソコンの時計を5:59か17:59にしましょう。(元に戻すのも忘れずに)


■スクリプトの概要

6〜18時だったら 6to18.html を、18〜6時だったら 18to6.html を、右下のフレームに表示させます。すでに表示されてる時はなにもしません。
6時から18時のページに切り換えてみる
18時から6時のページに切り換えてみる
※正しく動作していれば、すぐ元に戻されます。

また、毎時0分になると時刻をチェックして、6時か18時になると自動でページを切り換えます。
自動切り換えが必要ない時は、
window.setTimeout("timeCheck()", next);
の1行を削除するか、コメントアウト(行頭に // をつける)するだけです。

フレームのソースを表示
6to18.html のソースを表示
18to6.html のソースを表示
このページのソースを表示


■このスクリプトの対応ブラウザ

IE3
location.replace(); に対応してないのでエラーになります。
その他のブラウザ
難しい命令は使ってないので、きっと動くでしょう。

■ソース

■フレームセットのソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html lang="ja"><head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>昼と夜でフレームのページを変える</title>

<script type="text/javascript"><!--
function timeCheck() {

  var dayTimePage = "6to18.html"; //6時〜18時のページまでのパス(ファイル名)
  var atNightPage = "18to6.html"; //18時〜6時の以下同文
  var frameObject = self.frames["changeFrame"]; //適用するフレームの name を入れる

  var date = new Date();
  var H = date.getHours();
  var M = date.getMinutes();
  var S = date.getSeconds();

  var now = frameObject.location.href, path;
  //現在6時〜18時で、昼のページを表示してない
  if (H >= 6 && H < 18 && now.indexOf(dayTimePage) == -1)
    path = dayTimePage; //パスを昼のページに
  //現在18時〜6時で、夜のページを表示してない
  else if ((H < 6 || H >= 18) && now.indexOf(atNightPage) == -1)
    path = atNightPage; //パスを夜のページに
  if (path)
    frameObject.location.replace(path); //IE3はここでエラー

  var next = (3600 - (M *60) -S) *1000; //次の0分までの秒数を求める
  window.setTimeout("timeCheck()", next); //1時間おきにチェックする
}//-->
</script>

</head>

<frameset cols="*,150" frameborder="1">
  <frame src="left.html">
  <frameset rows="*,100" frameborder="1">
    <frame src="rightup.html">
    <frame src="6to18.html" name="changeFrame">
  </frameset>
</frameset>
</html>

■切り替えるページのソース

あとは、6to18.html18to6.html の両方に、下の4行を埋めこみます。
どこでもいいですが、慣習に倣って <head></head> の中あたりに。

<script type="text/javascript"><!--
if (top.frames.length && parent.timeCheck)
  window.setTimeout("parent.timeCheck()", 500);//-->
</script>


■蛇足

せっかくフレームがあるので、スクリプトをフレームセットの方にまとめ、遠隔操作で呼び出しています。これによって、「似たようなスクリプトをそれぞれのページに書く」という無駄がなくなります。

汎用性を考えてない最適化スクリプトなので、改変には多少の知識が必要ですが、それだけに効率は良いです。
もしうまく動かない時はご報告ください。


■ このページについて

このページは、質疑応答掲示板で使用した回答の残骸です。検索エンジンに捕まったりリサイクルしたりすることもあろうので、なんとなく残してあります。広く公開しているページではありませんが、第3者の閲覧を禁止するものでもありません。
恒久的なURIは保証できないものの、よほどのことがない限り削除されることはないでしょう。心配性な人はページの保存をおすすめします。(IEは mht 形式でないと保存できないかも)