getINNERWIDTH()
ブラウザの内幅をピクセル単位で取得するためのサンプルファンクションです。
n4,n6,n7,m1,o6,o7,s1では
innerWidthを使い、
e4,e5,e6では
clientWidhを使っています。
paddingを含み、スクロールバー,border,marginを除くエリアのサイズです。ただ、スクロールバーやmarginなどはブラウザやスキンによってデフォルトサイズが異なるためクロス化が難しく、微調整無しで使えるのはこのサンプルのようなケースに限られます。
*このファンクションをコピーして<script>と</script>の間にペーストしておくだけでこの機能をクロスブラウザに利用できるようになります。
*mkSubWin()は簡易的に内寸をそろえてサブウインドウを開くクロスブラウザ関数になっていますが、s1だけはサイズがそろいません。これもそろえたいときは
resizeToWIN() をご利用ください。
Cross-Browser のための Sample Function
Syntax : getINNERWIDTH()
//内幅(paddingを含み、スクロールバー,border,marginを除く)を求める
function getINNERWIDTH(){
if(window.opera)
return window.innerWidth //o6,o7用
else if(document.all)
return document.body.clientWidth //e4,e5,e6用
else if(document.layers)
return window.innerWidth //n4用
else if(document.getElementById)
return window.innerWidth //n6,n7,m1,s1用
return null
}
Example
//--親ウインドウ
<script type='text/javascript'>
<!--
//--サブウインドウを開く
function mkSubWin(URL,winName,x,y,w,h){
var para = "scrollbars=0,resizable=1"
+ ",innerWidth=" + w + ",innerHeight=" + h
+ ",width=" + w + ",height=" + h
window.open(URL,winName,para);
}
//-->
</script>
<a href="javascript:void(mkSubWin('./getinnerw1.htm','',10,10,400,300))">
クリックするとサブウインドウが開き
ダイアログにブラウザ内幅が表示されます</a>
//--子ウインドウ( getinnerw1.htm )
<script type='text/javascript'>
<!--
//内幅(paddingを含み、スクロールバー,border,marginを除く)を求める
function getINNERWIDTH(){
if(window.opera)
return window.innerWidth //o6,o7用
else if(document.all)
return document.body.clientWidth //e4,e5,e6用
else if(document.layers)
return window.innerWidth //n4用
else if(document.getElementById)
return window.innerWidth //n6,n7,m1,s1用
return null
}
//-->
</script>
<style type="text/css">
body{ margin:0px }
div { position:absolute;top:0px;left:0px }
</style>
</head>
<body bgcolor="red"
onload="alert('サブウインドウの内幅は'+ getINNERWIDTH() +'pxです')">
<div id="a"><img src="300400.gif" width=400 height=300 border=0></div>
</body>