小窓を開くJSで、高さを調節した表示位置を画面の右端にしたい

Question

よく、リンクをクリックすると新規に親窓で開くページがあります文末はその小窓を画面中央に開く、どこかでみたサンプルです。ここで、Excel2003のヘルプ窓のように、次のように動作させたいです。 (1)高さはクライアント画面の高さを取得して縦幅一杯に（例：768、600px等可変に） (2)幅は固定値（例：200px等と指定） (3)場所は右端（各クライアントの画面の幅－小窓幅（例：200px）＝小窓の左上角） (4)元窓（親窓）の幅はそのまま (5)ブラウザ依存せず動作する方が嬉しいですまとめると、リンクを開くと画面右端ピッタリに次のような小窓が現れるイメージです。 ┌────┬─┐ │親窓　　　│小│ │　　　　　　│窓│ │　　　　　　│　│ └────┴─┘ よろしくお願いします。クリックで小窓を開く

yukio1 · Accepted Answer

あまり要望を満たしていないかもしれませんが・・・
・JS部
function openNewWin(url, name){ 
window.open(url, name, 'status=yes,resizable=yes,top=0,left='+getScreenHEIGHT()/2+',width='+getScreenWIDTH()/2+',height='+getScreenHEIGHT()); 
} 

//スクリーンサイズから画面サイズ取得（高さ）
function getScreenHEIGHT(){ 
if(!!window.screen){ 
//N4,N6,Moz,IE,共用 
return screen.height-80; 
}else{ 
//上記以外 
return null; 
} 
} 

//スクリーンサイズから画面サイズ取得（幅）
function getScreenWIDTH(){ 
if(!!window.screen){ 
//N4,N6,Moz,IE,共用 
return screen.width-12; 
}else{ 
//上記以外 
return null; 
} 
} 
・HTML呼び出し部
<a href="#" target="new" onClick="openNewWin('komado.html','a'); return false;">

yukio1 · Answer

よく考えるといい加減な回答していたので、訂正です。

left='+getScreenWIDTH()*0.7+',
width='+getScreenWIDTH()*0.3+',

これで、おそらく、理想のものが出来ると思います。

yukio1 · Answer

window.open()関数の第三パラメータを少々いじってやれば可能ではないでしょうか。

現在の第三パラメータの設定は、分割してやると、

status=yes,
resizable=yes,
top=0,
left='+getScreenHEIGHT()/2+',
width='+getScreenWIDTH()/2+',
height='+getScreenHEIGHT()

こうですね。

関係してくるのはtop以下4つです。
topは新しくウィンドウを開く開始位置上辺、
leftは同ウィンドウを開く開始位置左辺、
widthは同ウィンドウの横幅、
heightは同ウィンドウの縦幅です。

上辺と縦幅は問題ないとのことですので、topとheightは変更せずに、
左開始位置のleftと横幅のwidthの値を少々変更してやればよいのではないでしょうか。

ちなみにgetScreenHEIGHT()で取得できる値は画面の縦幅、おそらく1200が取得できるはずです。
getScreenHEIGHT()/2としているので、litton101さんの環境下では、600をセットして
いることになると思います。

getScreenWIDTH()も同様に横幅を取得しているので、1600が入ってくるはずなので、
/2しているので、widthは800ということになっているはずです。

と、いった感じの補足でよいでしょうか。

小窓を開くJSで、高さを調節した表示位置を画面の右端にしたい

あまり要望を満たしていないかもしれませんが・・・

よく考えるといい加減な回答していたので、訂正です。

window.open()関数の第三パラメータを少々いじってやれば可能ではないでしょうか。

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング