JavaScript

ガイド:高橋 登史朗

Ajaxなど、何かと最近騒がれているJavaScriptの最新情報とその活用方法を解説します。

掲示板 取材依頼 問合せ

クロスブラウザを制する

掲載日: 2002年 09月 10日

クロスブラウザを制する Part 2 2-33 ブラウザリサイズ(内寸)




[ 2002.9.16 update ] n4のreloadバグFix部分のバグをFix



このリンクをクリックして開いた
サブウインドウを
下記ボタンでリサイズしてください。




(*一般のブラウザでは仕様により100px×100px以下にはリサイズできません。ただしMac版IE5は幅311px高さ200px以下が設定できないようです。)

resizeToWIN(width,height,oj)
Win n4 n6 n7 moz e4 e5 e6 o6 ,
Mac n4 n6 n7 moz e4.5 e5 ,
Linux n4 n6 n7 moz
ウインドウの内寸をリサイズするサンプルファンクションです。

<script language='JavaScript'>
<!--


  function resizeToWIN(width,height,oj){

    if(!arguments[2])oj=self

    oj.resizeTo(width,height)

    //--内寸取得
    if(window.opera||document.layers){       //n4 o6用
      var w = oj.innerWidth  
      var h = oj.innerHeight  
    } else if(document.all){                 //e用
      var w = oj.document.body.clientWidth 
      var h = oj.document.body.clientHeight
    } else if(document.getElementById){      //n6,n7,m1用
      var w = oj.innerWidth   
      var h = oj.innerHeight 
    }
    //resizeToの結果内寸が 正しければ、そのまま。
    //                     違うなら、差分を加算。
    if(width!=w||height!=h){
      oj.resizeBy((width-w),(height-h))
      if(document.layers)
        oj.location.reload(0) //n4はreloadでresizeバグ回避 
    }
    oj.focus()               //フォーカスする
  }
  

  //サブウインドウの相対位置とサイズを決めて
  //openHELPWIN(url,offsetx,offsety,width,height)を起動する
  function openHELPWIN(e,url,targetName,offsetx,offsety,width,height){

    //マウスの現在位置
    var mouseXonScreen = null
    var mouseYonScreen = null
  
    //マウスの現在位置取得
    if(document.all){                                       //e4,e5,e6
       mouseXonScreen = window.event.screenX 
       mouseYonScreen = window.event.screenY
    } else if(document.layers || document.getElementById ){ //n4,n6,n7,m1,o6
       mouseXonScreen = e.screenX
       mouseYonScreen = e.screenY
    }

    //マウスの現在位置から何ピクセル離すかをセット
    var setx = mouseXonScreen + offsetx
    var sety = mouseYonScreen + offsety

    //サブウインドウ開く(引数以外のパラメータも下記でセットできます)
    var para =""
             +" left="        +setx
             +",screenX="     +setx
             +",top="         +sety
             +",screenY="     +sety
             +",toolbar="     +0
             +",location="    +0
             +",directories=" +0
             +",status="      +0
             +",menubar="     +0
             +",scrollbars="  +0
             +",resizable="   +1
             +",innerWidth="  +width
             +",innerHeight=" +height
             +",width="       +width
             +",height="      +height

      helpwin=window.open(url,targetName,para)
      helpwin.focus()
  }

  //--ウインドウ有無確認関数
    function win_closed(winVar) {
 
      var ua = navigator.userAgent
      if( !!winVar )
          if( ( ua.indexOf('Gecko')!=-1 || ua.indexOf('MSIE 4')!=-1 )
               && ua.indexOf('Win')!=-1 ) 
               return winVar.closed
          else return typeof winVar.document  != 'object'
      else return true
    }

//-->
</script>

<br>
<br>
<br>

 <a href="javascript:void(0)" 
    onclick="openHELPWIN(event,'sub1.htm','',200,-100,100,100)">
このリンクをクリックして開いた
<br>サブウインドウを
<br>下記ボタンでリサイズしてください。 
</a>

 <form>

<input type="button" 
       value="300×250にリサイズ"
       onclick="if(!win_closed(window.helpwin))
                  resizeToWIN(300,250, helpwin)"><br>
<input type="button" 
       value="100×300にリサイズ"
       onclick="if(!win_closed(window.helpwin))
                  resizeToWIN(100,300, helpwin)"><br>
<input type="button" 
       value="300×100にリサイズ"
       onclick="if(!win_closed(window.helpwin))
                  resizeToWIN(300,100, helpwin)"><br>
</form>



* 緑文字が今回の関数
* 赤文字がこのスクリプトで最初に動作する部分
						
ウインドウをリサイズするメソッドresizeTo()はブラウザによって外寸か内寸かがまちまちです。 そこで、それらの実装違いを修正して内寸に統一しています。メソッドresizeTo(幅px,高さpx)に幅,高さをピクセルで代入しています。ウインドウ指定を省略するとselfウインドウが指定されます。


シリーズ目次 |



ガイドメールマガジン
携帯電話のメールアドレスでは登録できません

掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます。