フレームタグ（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のフレーム（右フレーム）がリンク先画面で置き換わります。
リンク先が重いページの場合、反応が無いのでリンクを押せたかどうか不安になります。そこでリンクをクリックしたらローディング画像が表示されて、リンク先ページの読み込みが完了したらローディング画像が消えるようにします。
理想としては、フレーム全体にオーバーレイするか、右フレームにオーバーレイするように表示したいところですが、やり方がわからなかったので、今回は左フレームに表示させます。
それでは作成に入ります。jQueryとCSS（と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; }
最後にjQueryで使用するclass名（link）を、aタグのclass属性に設定します。これで完成です。 リンク先のパスは何でも構いません。
framesetタグは、HTML5で廃止されたようなので使う機会は少ないと思いますが、簡単なサンプルが無かったので書きました。
参考サイト
<frame>の中にある要素をjQueryのセレクタで取得する方法 - Qiita
2015/03/14 追記
最初、別のframeタグの内容を取得する方法を知って、リンク元の画面は遷移しないから、JavaScriptを操作すれば出来そうと思って書いたのですが、画面が実際に遷移するのは、clickイベント終了後にブラウザに制御が渡った後なんですね。
JavaScriptで書き換えた瞬間に変わっていると勘違いしていました。動作の確認もやりにくかったです。
修正版は、frameタグとは関係なくなってしまいました。最初は、JavaScript内でもアクセスして、ブラウザでもアクセスするので、待ち時間が２倍になってしまって、ローディング画像を表示していも本末転倒かなと思ったのですが、JavaScript(jQuery)でのアクセスは、非同期で行うので時間は問題ないという結論になったので、公開します。
JavaScriptは、やはり奥が深いです。
