読者です 読者をやめる 読者になる 読者になる

redwarrior’s diary

C#, ASP.NET, WEB, G*などの雑多な情報

フレームタグ(frame)のリンクでローディング画像を表示する

2015/03/14 追記しました。

ちょっと昔のWEBサイトだとフレームを使用したページがあると思います。外部(一般)向けのページは、デザイナーに頼んできれいなサイトになっているけど、内部の管理ページなどは、最初に作った時のままってことありますよね。

そんなフレーム分割されたページでも使い勝手を向上させるために、リンククリックでローディング画像を表示する方法を調べてみました。

以下のようなframesetタグで作られたページを想定しています。

<frameset cols="100px,*">
  <frame src="left.html" name="menu"></frame>
  <frame src="main.html" name="contents"></frame>
</frameset>

よくある左右に分割した画面です。left.html(左フレーム)にあるリンクをクリックすると、main.htmlのフレーム(右フレーム)がリンク先画面で置き換わります。

リンク先が重いページの場合、反応が無いのでリンクを押せたかどうか不安になります。そこでリンクをクリックしたらローディング画像が表示されて、リンク先ページの読み込みが完了したらローディング画像が消えるようにします。

理想としては、フレーム全体にオーバーレイするか、右フレームにオーバーレイするように表示したいところですが、やり方がわからなかったので、今回は左フレームに表示させます。

それでは作成に入ります。jQueryCSS(とHTML)を使います。プラグインは使用しません。ローディング画像は以下で作成したものを使います。背景色やサイズも指定できるので便利ですね。

Loader Generator - Ajax loader


まずはHTMLです。jQueryの読み込みと、JavaScriptの記述、リンク先を表示するフレームの指定を行います。

HTML(left.html)

<link href="css/contents.css" rel="stylesheet" type="text/css"/>
<script src="jquery.min.js"></script>
<script type="text/javascript">
$(function() {
    // クリックしたら
    $(".link").click(function(e) {
        // ローディング要素を表示して
        $("#loading").show();
        
        // 先に非同期で画面を取得
        $.get($(this).prop("href"), function() {
            // ローディング要素を消す
            $("#loading").fadeOut();
        });
    })
});
</script>
<base target="contents"/>
...
...
<div id="loading"><img src="gif-load.gif"/><br/>Now Loading...</div>

jsファイル、ローディング画像は、HTMLファイルと同じディレクトリに配置しています。


続いてCSSです。HTMLファイルに直接記述しても、cssファイルを分けてもどちらでも大丈夫だと思います。 top, left, background-color等は、環境に合わせて修正してください。

CSS(contents.css)

#loading {
    display: none;
    position: absolute;
    top: 600px;
    left: 50px;
    z-index: 100;
    background-color:#fff;
}

cssファイルは、css用ディレクトリに配置しています。


最後にjQueryで使用するclass名(link)を、aタグのclass属性に設定します。これで完成です。 リンク先のパスは何でも構いません。

framesetタグは、HTML5で廃止されたようなので使う機会は少ないと思いますが、簡単なサンプルが無かったので書きました。

参考サイト

<frame>の中にある要素をjQueryのセレクタで取得する方法 - Qiita

jQueryでローディング処理 -load()編-

2015/03/14 追記

最初、別のframeタグの内容を取得する方法を知って、リンク元の画面は遷移しないから、JavaScriptを操作すれば出来そうと思って書いたのですが、画面が実際に遷移するのは、clickイベント終了後にブラウザに制御が渡った後なんですね。

JavaScriptで書き換えた瞬間に変わっていると勘違いしていました。動作の確認もやりにくかったです。

修正版は、frameタグとは関係なくなってしまいました。最初は、JavaScript内でもアクセスして、ブラウザでもアクセスするので、待ち時間が2倍になってしまって、ローディング画像を表示していも本末転倒かなと思ったのですが、JavaScript(jQuery)でのアクセスは、非同期で行うので時間は問題ないという結論になったので、公開します。

JavaScriptは、やはり奥が深いです。