Windowオブジェクトウィンドウのアクティブ切替/自動スクロール
- ウィンドウのアクティブ・非アクティブ切替
- 常にウィンドウを最前面に表示
- ウィンドウを自動スクロール〔scroll()、scrollBy()メソッド〕
- なだらかにスクロールしてページの上部に戻る〔scrollTo()メソッド〕
- どの位置までスクロールされているか調べる ※FF、NNのみ〔pageXoffset()、pageYoffset()メソッド〕
ウィンドウのアクティブ・非アクティブ切替
unknown
ウィンドウオブジェクトを格納した変数名.focus()
ウィンドウオブジェクトを格納した変数名.blur()
ウィンドウオブジェクトを格納した変数名.onfocus()=処理
ウィンドウオブジェクトを格納した変数名.onblur()=処理
サンプルを見るウィンドウオブジェクトを格納した変数名.blur()
ウィンドウオブジェクトを格納した変数名.onfocus()=処理
ウィンドウオブジェクトを格納した変数名.onblur()=処理
<script type="text/javascript"> var win; function windowOpen(){ win=window.open("","win","top=0,width=100,height=100,left=0,location=1,status=1"); } function winCheck(){ if(!win || win.closed){ alert("子ウィンドウを開いてから押してください"); return false; } } </script> <p><a href="javascript:windowOpen();">子ウィンドウを開く</a></p> <p> <input type="button" value="子ウィンドウにフォーカスを当てる" onclick="winCheck();win.focus();" /> <input type="button" value="子ウィンドウからフォーカスを外す" onclick="winCheck();win.blur();" /> <input type="button" value="子ウィンドウを閉じる" onclick="winCheck();win.close();" /> </p> <p><input type="button" value="親ウィンドウ(自身)を閉じる" onclick="self.close();" /></p>
常にウィンドウを最前面に表示
unknown
サンプルを見る<script type="text/javascript"> /* ウィンドウにフォーカスを当てる */ function winFocus(){ window.focus(); } /* ウィンドウの読み込み完了時 */ window.onload=winFocus; /* ウィンドウからフォーカスが外れた時 */ window.onblur=winFocus; </script> <div align="center"> <p> このウィンドウは常に最前面に表示されます。<br> そのためウィンドウからフォーカスを外す事はできません。<br> ウィンドウを閉じる場合は、[閉じるボタン]またはブラウザの[×ボタン]をクリックして下さい。 </p> <p> <input type="button" value="閉じる" onclick="self.close();" /> </p> </div>
ウィンドウを自動スクロール
scroll()、scrollBy()メソッド
unknown
window.scroll (X座標, Y座標)
window.scrollBy (X方向への移動量, Y方向への移動量)
サンプルを見るwindow.scrollBy (X方向への移動量, Y方向への移動量)
<script type="text/javascript"> var timerID; function ScrollStart(){ /* 0.2秒間隔でscroll()関数をコール */ timerID=setInterval("scroll()",200); } function scroll(){ /* 10pxずつ下方向へ画面をスクロール */ window.scrollBy(0,10); } function ScrollStop(){ /* タイマーを解除し、スクロール処理を停止 */ clearInterval(timerID); } </script> <input type="button" value="画面スクロール開始" onclick="ScrollStart()" /> <input type="button" value="画面スクロール停止" onclick="ScrollStop()" /> <script type="text/javascript"> for(var i=0; i<=30; i++){ document.write("<br \/>"); } </script>
なだらかにスクロールしてページの上部に戻る
scrollTo()メソッド
unknown
window.scrollTo (X座標, Y座標)
a要素のhref属性にアンカーを指定して、ページ上部に戻る場合は一瞬ですが、JavaScriptを使用すれば、てなだらかにスクロースしながらページ上部に戻すことができます。 スクロールする速さは、setTimeoutに渡す引数で遅くも早くも調整できます。
JavaScriptを無効にしている場合は、a要素のhref属性に指定したアンカーが適用され、通常通り一瞬でページ上部に戻ります。
サンプルを見る<script type="text/javascript"> /* なだらかにスクロールしてページの上部に戻る */ function fBacktoTop() { var d=document; /* 画面の左端からの距離 */ var scroll_left=d.body.scrollLeft || d.documentElement.scrollLeft || d.scrollX || 0; /* 画面の上端からの距離 */ var scroll_top=d.body.scrollTop || d.documentElement.scrollTop || d.scrollY || 0; // 画面スクロール scrollTo(scroll_left/2, scroll_top/2); /* 画面最上部に移動するまで繰り返す */ if(scroll_left>0 || scroll_top>0){ var f=setTimeout("fBacktoTop()", 50); }else{ clearTimeout(f); } } </script> <div id="pagetop"></div> <p> ページ下部にある「ページの上へ」というアンカーをクリックすると、 なだらかにスクロールしながらページ上部に戻ります。 </p> <script type="text/javascript"> for(var i=0; i<=100; i++) { document.write("<br \/>"); } </script> <!-- hrefで指定したアンカーを無視するためfalseを返す --> <a href="#pagetop" onclick="fBacktoTop(); return false;">ページの上へ</a>
どの位置までスクロールされているか調べる ※FF、NNのみ
pageXoffset()、pageYoffset()メソッド
unknown
window.pageXOffset
window.pageYOffset
window.pageYOffset
Firefox、Netscape
<script type="text/javascript"> var timeID; function getPageXYOffset() { document.frm.elements["txt"].value="pageXOffset: "+window.pageXOffset+"\npageYOffset: "+window.pageYOffset; timeID=setTimeout("getPageXYOffset()", 500); } window.onload=getPageXYOffset; </script> <form name="frm" action="#"> <textarea name="txt" cols="60" rows="3"></textarea> </form>