「今時の画面遷移って」というコンテンツで、HTMLだけで画面遷移を一元管理する方法について論じました。少数画面のアプリケーションでは、非常に有効な処理方式だと思うのですが、一般的なケースでは、少々大げさで使いにくいものでした。
そこで、もう少し簡単なLightweight版を考えてみます。
“簡単な”と言っても、必要最低限の機能は実装します。
画面遷移を一元管理して、自由に変更できるという部分は、そもそもやりたいことなので、実現させます。また、画面遷移を何らかの理由（入力チェック等）で抑止する手段も、提供します。
画面遷移のトリガは、特定の属性を指定してた要素を、マウスでクリックすることで実現できるようにします。スクリプトでの画面遷移に対応できるインターフェイスも用意します。
外部に対して、画面遷移が終了したことを通知するインターフェイスも、必要でしょう。
せっかくなので、2つのiframeを使ったダブルバッファリングにより、画面遷移時の特殊効果も実現できるようにします（オプション機能）。
では、早速実装してみます。
アンカーエレメントやフォームのサブミットを画面遷移のトリガとしてしまうと、画面の表示順を変更したり、ページの追加削除が発生した場合に、各ページの内容を修正する必要があります。
これを避けるために、Window上で発生したクリックイベントを全て拾うハンドラを設定し、その中でイベントを発生させた要素により処理を振り分けるようにします。
まずは簡単なサンプルです。
以下が、サンプルの実装内容の抜粋です。
イベントハンドラは、イベントから実際にクリックイベントを起こした要素を取得し（3行目〜）、その要素にdata-transitionId属性が存在するかを判定し、存在すれば属性の内容を引数に、JSPage.transitionをコールします。
JSPage.transitionでは、JSPage.getTransitionURLが実装されているかを判定し、実装されていれば呼び出して遷移するURLを取得します。
JSPage.getTransitionURLの引数で使用しているgetGIDは、リクエストされたURLから、ファイル名を取得する関数です。URLがhttp://localhost/page1.jtmlであれば、getGIDはpage1を返します。
21行目で、当該WindowにpageCloseBeforeが実装されているかをチェックし、実装されていればそれを呼出し、戻り値を判定します。trueが返った場合は画面遷移を実行し、falseが返った場合は、画面遷移を行いません。
このサンプルでは、ページ２でチェックボックスがチェックされていることが、画面遷移の前提となっています。
2行目の条件文は、タイムアウト（後述）の対応です。タイムアウト時は、チェック無しで画面遷移します。
マウスクリックのイベントハンドラは、通常Windowに登録しますが、IE8（IE8以下）の場合はdocumentに登録する必要があります。
トリガをクリックとしているので、ボタン要素やアンカー要素で画面遷移を起こすのであれば、マウスのクリックと同様に、フォーカスが当たっている状態でのEnterキー押下でも動作します。
また、タッチパネルでのタップでも動作します。
次が、遷移先のURLを取得する処理の実装です。
このサンプルはページ数も少ないので、単なるswitch文で制御していますが、ページ数が多い場合や複数のコンテンツを一元管理するようなケースでは、定義ファイルによる管理の方が効率的かもしれません。
11行目12行目で、xxxx_timeoutを判定していますが、このサンプルではページ２とページ３でタイマーを設定し、一定時間何もしないとページ１へ戻るようにしています。
スクリプトにより画面遷移させる場合は、上記の様な方法で行います。
２つのiframeを使った、ダブルバッファリングによる画面遷移を取り入れてみます。
この場合、親画面がiframeを持ち、その中にコンテンツを読み込むことになります。このため、ページ遷移を行う実体は、親画面に存在することになります。
そこで、画面遷移が必要となった時点で、親画面にページ遷移を行う関数が実装されているかどうかを判定し、実装されていた場合その関数を呼ぶようにします。
ダブルバッファリング自体は、それほど難しいものではありません。特定のIDの要素の中にdiv要素を２つ作成し、それぞれのIDをfrontBufとbackBufとします。作成したdiv要素の中にiframe要素を作成します。
IDのfrontBufとbackBufには、それぞれのz-indexに10と5を設定し、必ずfrontBufが前面に表示されるようにします。
画面の切替にはCSS3のアニメーションを使用します。backBufのロードが終了した時点でアニメーションを開始し、アニメーションが終了した時点でfrontBufを削除します。
ダブルバッファによる画面遷移は、backBufにiframeを作成し、onloadイベントのハンドラを設定し、URLを指定します。
onloadハンドラの中では、frontBufにアニメーションを設定し、アニメーションの終了イベントに、アニメーション終了ハンドラを指定します。
getAnimationNameは、アニメーションのスタイルシートのプロパティ名が、Webkitの場合標準とは異なるので、これを判断してプロパティ名を返す関数です。
getAnimationSecは、サンプルの上にある選択項目から、アニメーションの処理時間を取得します。
このサンプルの全てのコードは、ここからダウンロードしてください。