Search

ウィンドウのアクティブ・非アクティブ切替

unknown

ウィンドウオブジェクトを格納した変数名.focus()
ウィンドウオブジェクトを格納した変数名.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方向への移動量)
サンプルを見る
<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
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>

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか?

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手(1行メッセージも送れます♪)

pagetop

polarized women