とあるプログラマーの覚書

JavaScript編:別フレームの起動状態を察知したい

スポンサーリンク

HTMLで画面を作成する場合、framesetタグを使って、いくつかのframeに分かれた画面を作る事があると思います。
個人的には、frameで分けると、各フレームの同期とか考えるとややこしいのであまり好きじゃないんですが、既存システムのエンハンスとか、政治的理由みたいな感じで使わざるを得ない場合もあります。

先日、このようなframe分けされている画面で遭遇した問題がありました。
問題が起こった画面は、簡単に言うと以下のような構成でした。
JavaScript編:別フレームの起動状態を察知したい
ツールバーフレームには、メインフレームのページを切り替えるボタン等が設置されているような画面と想像して下さい。
そして、メインフレームには、コンテンツ画面か、各コンテンツへのリンクが貼られた目次画面かのいずれかが表示されるフレームと想像して下さい。

ツールバーフレームでは、以下のような事を行っています。
・メインフレームが、コンテンツか目次のどちらを表示しているのかフラグを管理している。
・一定間隔(例:1秒ごと)でタイマー(JavascriptのsetTimeout()によるタイマー)を回している。
・このタイマーでは、ある時間に到達すると、コンテンツを表示している場合は「A」という処理に飛ばし、目次を表示している場合は「B」という処理に飛ばし、終了画面を表示させる。

わかりにくいかもしれませんが、あまり具体的な事を書くわけにはいかないので、スミマセン…。

で、本題ですが、遭遇した問題というのは、、、
目次画面を開いていた状態でコンテンツを表示する為のリンクを押したタイミングと、タイマーによる自動遷移処理が競合したときに発生しました。
目次画面からコンテンツへのリンクを押した場合、ツールバーで管理している「どちらを表示しているかフラグ」は、「コンテンツ表示中」を示すのですが、実際のメインフレームでは、まだ画面が切り替わっておらず、目次表示中の状態で、タイマーによる自動遷移処理が起こりました。
よって、本当は「B」の処理へ飛ばしたいのですが、「A」の処理へ飛んでしまい、不具合発生、というような事になりました。

本当にわかりにくい例でスミマセン。
で、何が言いたいのかというと、異なったフレームの状態(完全に読み込み済みか)を知るには、ちょっと工夫がいるって事です。

今回の場合は、ツールバーフレームで管理している「どちらを表示しているかフラグ」は、メインフレーム側で切り替えを行うべきです。
最もわかりやすい方法は、メインフレーム側のページのonloadイベントでフラグを切り替えるのがベターかと思います。

ですが、私の直面した問題では、メインフレーム側のページには、色んな理由で修正を入れる事が出来ませんでした。
そこで、ツールバーから、メインフレームが現時点でどちらを開いているのかを察知する為の手段を探りました。
こういう場合は、目次画面とコンテンツ画面のHTML上の違いを探ります。
例えば、目次画面には無くて、コンテンツ画面にしかないformタグがあれば、それが使えます。

例えば、コンテンツ画面には、「contentsform」というフォームが存在するとしましょう。
で、メインフレームのフレーム名称(frameタグのname属性)は、「MainFrame」としましょう。
このとき、ツールバーフレームから、メインフレームがコンテンツ画面表示中かどうかは、以下のようなJavaScriptの判定文で判定出来ます。


if(parent.MainFrame.document.contentsform){
 //コンテンツ画面表示中
}else{
 //目次画面表示中

}


フォームオブジェクトをif文に掛けると、存在すればtrue、存在しなければfalseが返ってきてくれます。
このようなやり方で、別フレームの状態を感知する事が出来ます。

今回利用した「オブジェクトが存在すればtrue、存在しなければfalseが返ってきてくれる」という機能は、今回とはまた異なったトラブルでも利用できる可能性があるのでは?と思って、今回の現象を取り上げさせて頂きました。

今回は以上となります。


スポンサーリンク

URL :
TRACKBACK URL :

Leave a Reply

*
* (公開されません)

*

*

Return Top