IE6でwindow.outerWidthやwindow.outerHeightっぽい値取得Test
<<
作成日時 ： 2008/06/06 04:14
>>
ブログ気持玉 0 /
トラックバック 1 /
コメント 0
ちょっと調べごとをしていたので、せっかくだから備忘録として書いておきます。
JavaScriptで、ブラウザの内側（クライアント領域：タイトルバーや、ウィンドウの枠の幅を含まない領域）のサイズを取得するときは、Netscape系では window.innerWidth と window.innerHeight で、またIE6では document.body.clientHeight と document.body.clientWidth で取得できます。
しかし、ブラウザ全体の大きさ（タイトルバーや、ウィンドウの枠の幅を含んだ領域）を取得する場合、Netscape系では window.innerWidth と window.innerHeight で取得できるのですが、IE6ではそれに該当するようなオブジェクト・プロパティは見つけられませんでした。
これで何が困るかと言うと、JavaScriptで新規ウィンドウを開くとき、開く側ではブラウザ全体＝外側の大きさを指定するようになっています（window.open の引数がそうですね）。これを、開くウィンドウのクライアント領域の大きさを指定出来ればなあ、ということで、数時間悩みました。
さくっとネットを検索したところでは、「適当な値を足す」っていうのばかり見つかりました。これは最後に使う消極的手段かな。タイトルバーの高さなんて簡単に変えられますし。
そこで、「一旦 子ウィンドウを開いて、子ウィンドウの中で必要な値を計算して自分自身を閉じ、呼び出し元のウィンドウへ返す」という、結構無茶な方法を考えてみました。
実は自分が必要としていたのはIE6環境べったりで、かつ window.showModalDialog を使って、その中に画像を表示させるという特殊な条件だったので、単に window.open するだけとかなら、もっと楽に出来るのかもしれません。
呼び出される方のHTML(showimagesub.html)内 JavaScriptコード：
<script language="JavaScript">
<!--
function funcInit() {
// window.dialogArguments[1]：画像の幅(px)
// window.dialogArguments[2]：画像の高さ(px)
// window.dialogArguments[3]：画像のタイトル
// window.dialogArguments[4]：このDialogの幅(px)
// window.dialogArguments[5]：このDialogの高さ(px)
var imgW = window.dialogArguments[1];
var imgH = window.dialogArguments[2];
var orgdlgW = window.dialogArguments[4];
var orgdlgH = window.dialogArguments[5];
// x方向の枠 px数取得
var wfW = orgdlgW - document.body.clientWidth;
// y方向のタイトルバー・枠 px数取得
var wfH = orgdlgH - document.body.clientHeight;
if( window.dialogArguments[0] == '' ) {
// ウィンドウ枠の外側と内側の差を返す!
// ここは本題とは離れるが、<div>タグに
// style="overflow:scroll;" と指定した場合に表示される
// スクロールバーのpx数を取得している
var otDivElm = document.getElementById('divArea');
otDivElm.style.width = document.body.clientWidth + 'px';
otDivElm.style.height = document.body.clientHeight + 'px';
// <div>内の垂直スクロールバーの幅 px数取得
var sbVW = otDivElm.style.width.replace(/px/, '')
- otDivElm.clientWidth;
// <div>内の水平スクロールバーの高さ px数取得
var sbHH = otDivElm.style.height.replace(/px/, '')
- otDivElm.clientHeight;
// 各値を","で繋げた文字列にして返す
window.returnValue = wfW+','+wfH+','+sbVW+','+sbHH;
window.close(); // このDialogを即座に閉じる
}
// --------------------------------------------------------
// ここは、画像のURLが正しく渡された場合の処理
// すみませんが省略させていただきます
// --------------------------------------------------------
}
//-->
</script>
</head>
<body onload="funcInit();">
呼び出し元のHTML内 JavaScriptコード：
<script language="JavaScript">
<!--
var wfW = -1; // x方向のウィンドウ枠のpx数
var wfH = -1; // y方向のウィンドウ枠のpx数
var sbVW = -1; // 垂直スクロールバーの幅のpx数
var sbHH = -1; // 水平スクロールバーの高さのpx数
function funcShowImage(url, imgW, imgH, title) {
var dlgW = 1000; // 表示したいDialogの大きさ（幅）
var dlgH = 800; // 表示したいDialogの大きさ（高さ）
var strOpt = 'center:yes;dialogHide:yes;edge:raised;resizable:no;scroll:no;status:no;unadorned:yes';
// ↑showModalDialog関数のオプション、半分くらい意味不明
var args = new Array();
if( wfW < 0 || wfH < 0 || sbVW < 0 || sbHH < 0 ) {
// 初期化が済んでいない（ウィンドウ枠のpx数が取得できていない）ので、
// 取得を行う
var tdlgW = 200; // 超適当：テスト用Dialogの大きさ
var tdlgH = 200; // 超適当：テスト用Dialogの大きさ
args[0] = ''; // ここに '' を与えると初期化用の呼び出し
args[1] = imgW;
args[2] = imgH;
args[3] = '';
args[4] = tdlgW;
args[5] = tdlgH;
// ↑↓argsと、関数への引数とに渡すDialogサイズ指定を一致させること
var retval = showModalDialog("showimagesub.html", args,
'dialogWidth:'+tdlgW+'px;dialogHeight:'+tdlgH+'px;'+strOpt
);
var aRetvals = retval.split(','); // 戻り値文字列を","で区切る
wfW = aRetvals[0];
wfH = aRetvals[1];
sbVW = aRetvals[2];
sbHH = aRetvals[3];
}
// 画像表示に必要な幅は、
// 画像自身の幅+スクロールバーの幅+ウィンドウ枠の幅
var minW = Number(imgW) + Number(sbVW) + Number(wfW);
// 画像表示に必要な高さは、
// 画像自身の高さ+スクロールバーの高さ+ウィンドウ枠の高さ
var minH = Number(imgH) + Number(sbHH) + Number(wfH);
// サイズの調整…
dlgW = Math.min(dlgW, minW);
dlgH = Math.min(dlgH, minH);
dlgW = Math.min(dlgW, window.screen.availWidth);
dlgH = Math.min(dlgH, window.screen.availHeight);
args[0] = url; // 今度は表示用の本番呼び出し
args[1] = imgW;
args[2] = imgH;
args[3] = title;
args[4] = dlgW;
args[5] = dlgH;
val = showModalDialog("showimagesub.html", args,
'dialogWidth:'+dlgW+'px;dialogHeight:'+dlgH+'px;'+strOpt
);
}
//-->
</script>
こんな感じでやってみました。エラー処理とかしてません。さっき動いたばっかりだし。
呼び出された方のModalDialogに、呼び出し元から外側の大きさを与えてやり、内側の大きさはModalDialog自身で取得し、その差（pixel数）を取得する、ということをやっているだけです。一瞬、空白の窓が見えますが、今は気にしない。
ただし実際のブラウザウィンドウでは、ツールバーやアドレスバー、ステータスバーなどの状況によって大きさが変化しますので、この方法そのままではダメでしょう。window.openを使えば近い値が取れるかな？
ちなみにModalDialog側では、onLoad関数で呼ばれるあたりまでいかないと、clientWidth・clientHeightの値が0になってしまうので注意（BODY内に直接JavaScriptを記述したらダメだった）。
お世辞にも、綺麗な手法・コードとは呼べないです。これは、実は私が長期にわたって現場から離れていることが影響していると思います。
また、きちんと探せば、既にもっと洗練されて簡単なコードがおそらくどこかにあるでしょう。
そもそもIE6の showModalDialog なんか使う奴はいねえだろう、とか（笑）。
いろいろあると思いますが。とりあえず、書き残しておきます。ええ、ただの自己満足です…。
|
