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>