【javascript/HTML】iframeの内容をタイマーで更新するコード(setTimeout/setIntervalで自動的にページを入れ替える)


PC/プログラム/ゲーム/ネット系レポ TOPはこちら

自動的に巡回表示するホームページ

ニュースや天気予報などのお気に入りのサイトを、20秒おきに順繰りに表示するようなホームページをつくると面白いかなぁーということで、作ってみました。

しかし・・・!!様々な書籍で記載されたコードを打ち込んでも思うように動いてくれませんでした・・・。

いろいろ試して、ieやfiredox、アンドロイドのブラウザで動作するスクリプトができましたのでご紹介します。

お気に入りのページを20秒おきに順繰り表示するHTML/Javascript

<!-- とりあえずヘッダ部分 -->
<html>
<head>
<title>自動お気に入りページ表示</title>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Language" content="ja">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<!-- ページ番号はグローバル変数で記憶 -->
<script type="text/javascript">
var pageno = 1;

<!-- 最初は15秒後にページ書き換えが走る -->
function view_start()
{
    setTimeout( view_nextpage() , 15000 );
 }

<!-- ページ書き換えの関数  とりあえず20秒間隔で、11個のサイトを順繰り表示します-->
var view_nextpage = function()
{
    if ( pageno == 1 ) myFrame.location.href = 'https://www...../';
    if ( pageno == 2 ) myFrame.location.href = 'https://www...../';
    if ( pageno == 3 ) myFrame.location.href = 'https://www...../';
    if ( pageno == 4 ) myFrame.location.href = 'https://www...../';
    if ( pageno == 5 ) myFrame.location.href = 'https://www...../';
    if ( pageno == 6 ) myFrame.location.href = 'https://www...../';
    if ( pageno == 7 ) myFrame.location.href = 'https://www...../';
    if ( pageno == 8 ) myFrame.location.href = 'https://www...../';
    if ( pageno == 9 ) myFrame.location.href = 'https://www...../';
    if ( pageno == 10 ) myFrame.location.href = 'https://www...../';
    if ( pageno == 11 ) myFrame.location.href = 'https://www...../';

    pageno++;
    if ( pageno > 12 ) pageno=1;

    setTimeout( view_nextpage , 20000 );

}
</script>

<!-- ページを読み込んだ時に、最初のタイマーをセットする関数を起動する -->
<body onload="view_start()">

<!-- iフレームの大きさは適宜設定します。最初に表示されるページのURLをここで指定します -->
<iframe src="https://dsstation.sakura.ne.jp/" name="myFrame" width="480px" height="100%" ></iframe>

</html>

関数の宣言部分で、

var view_nextpage = function()

と宣言しないとうまく動かなかったので、ご注意を・・・。

サンプルページ