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


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

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

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

※IEのみボタンが動作します


お気に入りのページを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()

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

サンプルページ


<CMです>

<高速バス> 最近、人気が高いのは高いのは、WILLER社が運営している高速バスです。2列で個室のような「コクーンシート」という座席がある、最先端の高速バスが予約できます。その他、さまざまな高速バスから選んで予約できるサイト(楽天トラベルのバス予約) では、多くの時間帯や乗車駅・下車駅が選べて、価格も安いので、おすすめです。

WILLER TRAVEL

<日本旅行のセットプラン> JRと関係が深い日本旅行なので、新幹線とホテルという珍しいセットプランがあります。ホテルと交通を個別に予約するよりも万円単位でお得になる場合もあるとのことです。人気なので予約ですぐに一杯になることも多いので、一度チェックしてみると良いと思います。

海外からの観光客が急激に増加してるため、全国的にホテルの予約が取りにくい状態になっています。良い条件のホテルがあれば、とりあえず予約しておくことをお勧めします。(有名3社のホテル予約サイトです ⇒ 日本旅行 楽天・交通セット じゃらんパック

<高速バスで東京ディズニーランド> 高速バスで価格を抑えつつも、ホテル付きでゆったりすごせるプランが結構人気です。これも一度チェックしてみる価値ありです・・・

高速・夜行バスで東京ディズニーランドへ