- ベストアンサー
if文で「ページが読み込まれた時」を表現するには？
document.activeElement以外を使って、 JavaScriptのif文で「ページが読み込まれただけの状態なら」を表現する方法はありますか？ if (document.activeElement.id == '') や if (document.activeElement.id == 'bodyタグのid') に変わる方法を探しています。 IEではどうしてもページの読み込み時に、このif文が原因で 左下に黄色いエラーが出てしまうので・・・。 どうかよろしくお願いいたします。
- r_bel
- お礼率95% (81/85)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (2)
- Chaire
- ベストアンサー率60% (79/130)
もっと具体的に、どのタイミングですか？ もともと Mozilla/Firefox の独自拡張で、Opera 9、Safari 3 がサポートし、HTML(5) に収録された DOMContentLoaded というイベントタイプがあります。これは HTML を最後まで解析したが、画像などはまだ届いていない状態で発火します。一方、画像もスタイルシートも全部そろった時点で発火するのが load ですね。 IE は document の onreadystatechange ハンドラで読み込み状態を調べられますが、あまり精度が良くなかった気がします。Safari 2 以前は document.readyState を setInterval() で監視したりしましたが、これはもっと精度が落ちます。 最近の IE 用のライブラリでは、スクロールできるか doScroll() を実行し、エラーが出なければ HTML の読み込みは終わっている（画像は終わってないかもしれない）と判断しています。ダーティーハックではありますが。 もっと単純に、head だけが読み込み完了していれば良いなら（例えば title を拾えれば十分なら）、document.body が存在するか setInterval() で監視しても良いでしょう。これは結局、activeElement を使う方法と同じです。
お礼
Chaireさん、アドバイスありがとうございます！ onreadystatechange や doScroll() について全く知らなかったので勉強になりました。 タイミングとしては、入力フォームでの onfocus, onblur, onkeyup です。 例えば以下のような時に、フォーカスがどこにあるかによって処理の分岐を行いたいと考えています。 - 最初の読み込み時、 - 再読み込み時、 - 入力フォームのフォーカス・更新時、 - 入力フォームからフォーカスが外れた時 IEだとactiveElementが最初の読み込み時には存在しない（？）のに対し、 FireFoxでは、bodyにフォーカスがあたってbodyがactiveElementになる、 という違いがあるようなのですが、様々なイベントの時に、 どちらのブラウザにも対応させるにはどうすれば良いかわからず行き詰っております。 そこで、視点を変えて他の判定基準があればと思い、質問させていただいた次第です。 例えばif文を以下のようにしたら良いのかなぁ～と思いまして。 if ((別の判定基準) || (obj.tagName != 'INPUT')) 誠にお手数ですが、もし再度アドバイスを頂戴できれば大変うれしいです。m(_ _)m どうぞよろしくお願いいたします。
補足
結局、発想を転換？して、ごくごく単純に以下のようにすることで解決しました。 var obj = document.activeElement; if(obj){ obj = obj.id; } else { obj = ''; } if(obj == '') { 処理 } こうすることで、INPUT以外の時には常にBODYにフォーカスが当たるFireFoxにも、 また、初期読み込み時には、document.activeElementが存在しない（？）IEにも 対応することができました。 具体的な代替案やヒントをいただき、ありがとうございました！
- SAYKA
- ベストアンサー率34% (944/2776)
？ 聞いてる意味がわからないけれど onLoad で目的のscript(function)起動するのが普通じゃないかな。 HTMLに仕込まないでonloadするのは addEventListener() だけど、古いIEだと別なやつを使うだとか書き方が違うので注意
お礼
SAYKAさん、ご回答ありがとうございます。 スペース的にコード全てを書わけにもいかず、 かと言って、それを説明するのもどうしたら良いかわからず、 このような足らずの質問文になってしまいました。 にも関わらずお返事くださって本当にありがとうございます！ 何とか説明を簡略化するためのデモコードを書いてみましたので ご覧いただき、再度アドバイスいただけましたらうれしいです。 よろしくお願いいたします。
補足
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>Test</title> <script type="text/javascript"> function myf() { var obj = document.activeElement; if(obj) { document.getElementById("span1").innerHTML = 'objは存在します。tagNameは ' + obj.tagName + ' です。'; } else { document.getElementById("span1").innerHTML = 'objは存在しません。'; } } </script> <style type="text/css"> <!-- --> </style> </head> <body> <div id="div1" style="margin-top:2em; "> <form> 名前：<input type="text" id="name" name="name" size="20" onfocus="myf();" onblur="myf();"> </form> </div> <div id="div2" style="margin-top:2em; "> <form> 所属：<input type="text" id="team" name="team" size="20" onfocus="myf();" onblur="myf();"> </form> </div> <div id="div3" style="margin-top:2em; "> <span id="span1"></span> </div> <script type="text/javascript"> myf(); </script> <div id="div4" style="margin-top:2em; line-height:150%; "> 1). 全く初めてページを読み込んだ時、 obj.tagName(=document.activeElement.tagName)は、IEでは存在しないようですが、FireFoxではBODYとなります。<br /> 2). 一度INPUT内をクリックしてから、画面上の他の部分をクリックした時、 FireFoxとIEでは異なるobjになります。<br /> （FireFoxでは、どこをクリックしてもobj.tagNameはBODYですが、 IEだとobj.tagNameは、クリックする箇所によって、BODYやHTMLになります。）<br /> 3). 上記2).のINPUTをblurした状態で、再読み込み(F5)をすると、IEではやはりobjがなくなってしまいますが、 FireFoxではやはりBODYが返ってきます。 </div> </body> </html>
お礼
追加のアドバイス、ありがとうございました。 いただいたアドバイスは残念ながら今の自分には難しくて理解できないのですが、 いつか分かるよう、がんばって勉強を続けたいと思います。 ありがとうございました！