イヌでもわかるJavaScript講座
|
イヌでもわかるJavaScript講座
|
|
Step.39 - 「只今読込中！」の表示
|
ホームページを読みこんでいる最中は「只今、ホームページ読込中！」というメッセージを表示してみます。 |
| Step テーマ ● document.getElementById().style.visibility - DIVタグの表示/非表示 ● window.innerWidth - クライアント領域の幅 ~IE8 IE9~ FX SF OP GC ● window.innerHeight - クライアント領域の高さ ~IE8 IE9~ FX SF OP GC ● document.body.clientWidth - クライアント領域の幅 IE FX SF OP GC ● document.body.clientHeight - クライアント領域の高さ IE FX SF OP GC |
実行例更新ボタンで再度確認できます。 |
リスト<body onload="myOnLoad()"> <DIV id="mySplash" style="position:absolute;z-index:1;visibility:hidden;width:600px;height:140px;background-color:#FFFFFF;text-align:center;font-size:large;font-weight:bold;border-style:ridge"> <BR><BR>ただいまページ読み込み中。お待ちください。 </DIV> <script type="text/javascript"><!-- myY = (window.innerHeight !== undefined) ? window.innerHeight : document.body.clientHeight; myX = (window.innerWidth !== undefined) ? window.innerWidth : document.body.clientWidth; myObj = document.getElementById("mySplash").style; myObj.top = (myY/2-70 < 0) ? 0 : myY/2-70; myObj.left = (myX/2-300 <0) ? 0 : myX/2-300; myObj.visibility = "visible"; } function myOnLoad(){ myObj.visibility = "hidden"; } // --></script> |
| サンプルだけの HTMLは こちらへ |
説明ホームページ読込(表示)中のときに「ただいまページ読み込み中。お待ちください。」というスプラッシュメッセージを表示して、訪問者に読込が終了するまで、待ってもらいます。 やりたいことは、簡単です。 ページ読み込み中の際に、 ただいまページ読み込み中。お待ちください。 <BR><BR>ただいまページ読み込み中。お待ちください。 </DIV> を表示して、ページ読み込みが完了すれば、非表示にするだけです。 まず、スプラッシュウィンドウを画面の中央に表示させたいので、座標を求めました。 myY = (window.innerHeight !== undefined) ? window.innerHeight : document.body.clientHeight; myX = (window.innerWidth !== undefined) ? window.innerWidth : document.body.clientWidth; myObj = document.getElementById("mySplash").style; myObj.top = (myY/2-70 < 0) ? 0 : myY/2-70; myObj.left = (myX/2-300 <0) ? 0 : myX/2-300; myObj.visibility = "visible"; 画面の幅と高さを取得します。 幅 = window.innerWidth; 高さ = window.innerHeight; 旧IE であれば、 幅 = document.body.clientWidth; 高さ = document.body.clientHeight; を使います。 myY = (window.innerHeight !== undefined) ? window.innerHeight : document.body.clientHeight; myX = (window.innerWidth !== undefined) ? window.innerWidth : document.body.clientWidth; ※ window.innerHeight、window.innerWidth が使えない場合は、無条件に 旧IE とみなしています。 ※ !== 演算子 は 値と型もチェックする厳密な比較をします。( != 演算子 は、値のみで型のチェックはありません ) ( 1 == "1" ) の結果は「等しい」ですが、 ( 1 === "1" ) の結果は「等しくない」です。 ※ undefined は、未定義という意味の定数です。このプロパティはこのブラウザで使えるかといった時に使います。 ※ 三項演算子 (条件)?真:偽 は、Step.3 参照。 その中央の座標なので、それぞれを 2で割って、さらに スプラッシュウィンドウのサイズの半分を引きます。 myObj.top = (myY/2-70 < 0) ? 0 : myY/2-70; myObj.left = (myX/2-300 <0) ? 0 : myX/2-300; スプラッシュウィンドウの表示/非表示は、 document.getElementById("mySplash").style.visibility に、以下の文字列をセットします。
<DIV id="mySplash" style="position:absolute;visibility:hidden;width:600px;height:140px;background-color:#FFFFFF;text-align:center;font-size:large;font-weight:bold;border-style:ridge"> ページの読み込みが完了すれば、onload で、非表示用関数を呼びます。 <body onload="myOnLoad()"> function myOnLoad(){ myObj.visibility = "hidden"; } |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
 |