サブウインドウのサイズ取得の問題

このQ&Aのポイント
  • サブウインドウを開いた後、サイズを手動でリサイズし、clientwidthなどの情報を取得したいと考えています。
  • 以下のサンプルプログラムを試しましたが、clientwidthの情報を取得できない問題があります。
  • 質問者は環境が原因である可能性を考えており、解決策を求めています。
回答を見る
  • ベストアンサー

サブウインドウのサイズ等の情報を取得したい

サブウインドウを開いた後、そのサイズを手でリサイズして、 その後、clientwidth等の情報を入手したいと考えています。 情報入手のところがうまく行かず、2日悩んでいます。 以下のサンプルプログラムを見つけ、その通りに実行しましたが 動作しません。(alert"A"は実施されますが"B"は実施されない おそらく、clientwidthの情報をGetする際に問題がありそれ以降実行されていない) 何か環境等悪いのでしょうか?行き詰っています お教えいただきたくお願い申し上げます。 <script Language="JavaScript"><!-- function setCenter() { subWin = window.open("Hogegoge.html","sub","width=620,height=480"); scrnW = screen.width; scrnH = screen.height; alert("A"); winW = subWin.document.body.clientWidth; alert("B"); winH = subWin.document.body.clientHeight; x = (scrnW - winW) /2; y = (scrnH - winH) /2; subWin.moveTo(x,y); } // --></script> <form> <input type="button" value="中央に移動" onClick="setCenter()"> </form>

質問者が選んだベストアンサー

  • ベストアンサー
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

ご提示のサンプルは、IE6の互換モードで動作を確認できます。 ただし、ウィンドウサイズはブラウザによって取得方法が異なるようなので、以下を参考になさるとよろしいのではないでしょうか。  http://codezine.jp/article/detail/3065  http://www.sasaraan.net/program/js/jswndstate.html ところで、 >そのサイズを手でリサイズして、 >その後、clientwidth等の情報を入手したいと考えています。 ということなので、 IEの場合は、デフォルトはリサイズが不可みたいなので、スタイルでresizableを指定しておかないと、手動のリサイズはできないみたい。 また、リサイズ後に位置を指定したいという意図だと思いますが、ご提示のものだと、(アラートを削除すると)リサイズ前に位置を設定してしまいそうですね。 リサイズ後も位置指定をしたいのであれば、サブウインドウ側のスクリプトで、ロード時とリサイズ時のイベントを取得して処理するのが便利かも。 (ユーザがリサイズした時に、位置が移動されてしまうと、感覚的に気持ち悪いような気もしますが。)

mimisuke35
質問者

お礼

残念ながら、現象は改善されませんでしたが、大変参考になりました。本当にありがとうございます

mimisuke35
質問者

補足

早速のご回答ありがとうございます。 IE6で使用しているため早速 winW = subWin.document.body.clientWidth;       ↓ winW = subWin.document.documentElement.clientWidth; として試してみました。 残念ながら、現象は改善されませんでした。 サブウインドウでなく winW = document.documentElement.clientWidth; とすると問題なく動作します。(alertで"B"が表示される) なにか、windowオブジェクトとして なにか宣言しとかないといけないものなのでしょうか。。 ちなみに、サンプルのオブジェクトが正しく情報を取得できれば 後半部分は修正して目的の動作にしたいと思っております。 後々のところまで、考えていただき本当にありがとうございます。

関連するQ&A

  • ウィンドウサイズの変更を滑らかに取得したい

    <html> <head> <script type="text/javascript"> function test(){ width = document.body.clientWidth; height = document.body.clientHeight; document.getElementById("haba").value=width; document.getElementById("takasa").value=height; } </script> </head> <body onload="window.setInterval('test()',1);"> 幅<input size="20" type="text" id="haba"/> 高さ<input size="20" type="text" id="takasa"/> </body> </html> -------------------------------------------------------------- 以上のような、ブラウザのウィンドウサイズを取得する コードを書いたのですが、滑らかに高さと幅が取得出来ずに困ってます。 イメージとしては、ウィンドウサイズをマウスで変更すると 高さと幅の数値がもっと滑らかに細かく変化するように したいのです。 どなたか回答お願いします。

  • 別ウィンドウをそれぞれ違うサイズで位置指定で開きたい

    現在ウェブサイトを作っておりまして、別ウィンドウをそれぞれ違うサイズで位置指定で開きたいと思い、headの中に以下の記述をしました。 <SCRIPT language="JavaScript"> <!-- w = 800; h = 600; function season2009ss() { x = (screen.width - w) / 2; y = (screen.height - h) / 2; subWin = window.open("look/season2009ss.html","season2009ss","screenX="+x+",screenY="+y+",left="+x+",top="+y+",width="+w+",height="+h+",scrollbars=yes"); } //--> </SCRIPT> <SCRIPT language="JavaScript"> <!-- w = 500; h = 660; function contact() { x = (screen.width - w) / 2; y = (screen.height - h) / 2; subWin = window.open("mail/contact.html","contact","screenX="+x+",screenY="+y+",left="+x+",top="+y+",width="+w+",height="+h+",scrollbars=yes"); } //--> </SCRIPT> 開きたい画面は二つあり、位置は両ウィンドウとも画面の真ん中で、サイズのみ違います。 しかし、この形ですとなぜかウィンドウサイズは両方とも同じになってしまい、狙い通りにいきません。 何が原因なのでしょうか。

  • google マップ サイズ変更

    グーグルマップで、windowsのサイズ変更をしたら、地図の大きさも材レクトに変わるという処理をしたく、ウェブを参考に作ったのですが、 ローカルだと、firefox,opera,ie6でできるのですが、 HPにuploadすると、operaでしか実現できません。他のだと地図サイズが変化しません。 どなたかアドバイスいただけたら幸いです。 //<![CDATA[ //スクリプト定義 var map; var latLng = new GLatLng(43,14); // 初期位置設定 function load() { resize(); if (GBrowserIsCompatible()) { //Google Maps 利用可能? map = new GMap2(document.getElementById("map")); // マップ1 map.setCenter(latLng, 13); // 起動時初期位置 } } function resize(){ var map_obj=document.getElementById("map"); var disp=getDispSize(); map_obj.style.width=disp.width-100+"px"; map_obj.style.height=disp.height-100+"px"; } function getDispSize(){ if(document.all){ if(window.opera){ return {width:document.body.clientWidth,height:document.body.clientHeight}; } else { return {width:document.documentElement.clientWidth,height:document.documentElement.clientHeight}; } } // NN else if(document.layers || document.getElementById){ return {width:window.innerWidth,height:window.innerHeight}; } } //]]>

  • <xml>タグを使った例

    つい先日も質問しましたが、具体例を記述したいと思います。 HTMLは以下の感じです。 <form name="frm"> <a href="#" onclick="javascript:call('test');">リンク</a> <xml id="includeXls"> <body scroll="no" style="margin:0 0 0 0"> <iframe name="fra1" src='2.html' height=100% width=100%> </body> </xml> </form> <script language="javascript"> <!-- function call(did){ var arg = "resizable=1,scrollbars=0,width=600,height=480,toolbar=1,menubar1=,directories=0,status=0"; var subWin; if (subWin != null) { if (!subWin.closed) { subWin.close(); } } subWin = window.open("", did, arg); subWin.document.open(); subWin.document.write(includeXls.innerHTML); subWin.document.close(); subWin.focus(); } //--> </script> これを適当な名前でhtmlを表示して、2.htmlという適当なhtmlを指定した「リンク」をクリックすると、 それが開きます。 このとき、<xml>タグを使わずに別のタグを使ってどうようなことができるのならそれを教えていただけたらと思います。 また、この<xml>タグはどういう意味になるのかも教えていただけたらと思います。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • 小窓の出し方について教えて下さい。(2)

    http://oshiete1.goo.ne.jp/kotaeru.php3?q=568520 先ほどご回答を頂き、小窓の開き方は解決致しました。 ↓ <script type="text/javascript"><!-- function subwin(imgsrc,imgalt){ sub1=window.open("","subwin","width=230,height=160,resizable=1"); sub1.document.open(); sub1.document.write("<html><head><title>"+imgalt+"</title></head>"); sub1.document.write("<body style='margin: 0;'>") sub1.document.write("<img src='"+imgsrc+"' alt='"+imgalt+"'>"); sub1.document.write("</body></html>"); sub1.document.close(); } //--></script> body内の、呼び出し部分は、 <a href="#" onClick="subwin('画像ファイルのURL','画像ファイルの説明'); return false;"><img src="p_1.jpg" border="0" width="70" height="48"></a> が、クリックして開く小窓に表示させるHTMLファイルで開かせたい 画像が同じページにあります。(大きさは横500縦600) もう1つ教えて頂いた↓ <script type="text/javascript"><!-- function subwin(file){ window.open(file,"subwin","resizable=1, width=230, height=160"); } //--></script> 以上をhead内に記述して、呼び出し部分は <a href="#" onClick="subwin('読み出すHTMLファイルのURL'); return false;"><img src="p_1.jpg" border="0" width="70" height="48"></a> のwidth=230, height=160をwidth=500, height=600にして上記ソースに加えると(?) 全部の小窓がwidth=500, height=600になってしまいます。 width=230, height=160の画像で開かせる小窓と width=500, height=600のHTMLで開かせたい小窓を 同じページに加えるには、どうしたらよいのでしょうか? ご回答宜しくお願い致します。

  • formについて

    JavaScriptを使ったアンケートについて <html> <head> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <title>アンケート</title> <script type="text/javascript"> function Conf(){ a = document.forms[0].Email.value; if(a.match(/[a-zA-Z0-9_.]+@+[a-zA-Z0-9.]+$/)==null){ alert("間違っています"); } subWin=window.open("about:blank","form_data","width=300,height=300"); subWin.document.open(); subWin.document.write(a); subWin.document.close(); } </script> </head> <body> <form> <p>■メールアドレスを記入して下さい</p> <input type="text" name="Email" id="Email" size="40" /> <input type="button" value="確認" onClick="Conf()" /> </form> </body> </html> これだと、メルアドが間違っていますとalertが表示された後に、サブゥインドウが表示されてしまいます。 アンケートフォームを作りたくてJavaScriptを勉強中なのですが、メアドの入力が合っている場合のみサブゥインドウを表示させる方法が分からず、質問させて下さい。回答よろしくお願い申し上げます。

  • JavaScriptでプルダウンのサイズを取得

    JavaScriptにてプルダウンのサイズ(<option>の数)を取得したいと思っています。 document.getElementById("pulldown").length にて取得できると思うのですが 試してみたところ無反応でした。どう書けばよろしいのでしょうか。 <html> <head>     <script type="text/JavaScript">               alert(document.getElementById("pulldown").length);     </script> </head> <body> <form name="form"> <select name="pulldown" id="pulldown"> <option value="5">5</option> </select> </form> </body> </html>

  • サブウィンドウから親画面に渡すには

    サブウィンドウでチェックを入れた項目を、「選択」というボタンを押すことで親画面のselectボックス内に表示させたいのですが、下記のどのようなコードを追加すればよろしいでしょうか。 --------------------------------------- <html> <head> <script LANGUAGE="JavaScript"> function WindowOpen(){ subWin=window.open(); subWin.document.open(); subWin.document.write("<html><body><form name='subform'>"); subWin.document.write("<input type='checkbox' name='check1'>東京"); subWin.document.write("<br><input type='checkbox' name='check2'>大阪"); subWin.document.write("<br><input type='checkbox' name='check3'>名古屋"); subWin.document.write("<br><input type='button' name='btn2' value='選択'>"); subWin.document.write("</form></body></html>"); subWin.document.close(); } </script> </head> <body> <form name="myform"> <input type="button" name="btn1" value="参照" onClick="WindowOpen();"> <select name="slct1" size="3" style="width:50%;"> <option> <option> <option> </select> </form> </body> </html>

  • 外部ファイルの記述の問題なのかエラーが出ます

    IE6を使っています。 次のように[a.js]を呼び出したのですが、 オブジェクトがありませんとエラーが出ます。 そのエラーの次に[test.html]にあるalertの内容は表示されます。 どこが間違っているのでしょうか? [a.js] var a = document.body.clientWidth; [test.html] <html> <head> <title>test</title> <script type="text/javascript" src="a.js"></script> </head> <body> <script type="text/javascript"><!-- alert(document.body.clientWidth); --></script> </body> </html>

  • JavaScript 画像のサイズを取得して、それに適したウインドウを表示したい

    画像のサイズを取得して、それに適したウインドウを表示したいと思っています。 今のところ、下記のように実装しましたがローカルで実行した際に、サイズを取得できない場合があります。 (document.write(size);で、width=0,height=0 と返ってくる) また、サーバ上で実行するとブラウザが応答なしになってしまいます…。 どのように解決すればよいか、良い案がありましたら是非ご教授下さい。 宜しくお願い致します。 function popup_img(url, title){ var tImg = new Image(); tImg.src = url; x = tImg.width; y = tImg.height; document.write(size);  //for debug if(x!=0 && y!=0){ var size = "width=" + x + ", height=" + y; a = window.open("","",size); a.document.write("<HTML>\n"); a.document.write("<TITLE>",title,"</TITLE>\n"); a.document.write("<BODY TOPMARGIN=0 LEFTMARGIN=0 MARGINHEIGHT=0 MARGINWIDTH=0>\n"); a.document.write("<IMG SRC=",url,">\n"); a.document.write("</BODY></HTML>\n"); a.document.close(); a.moveTo((a.screen.availWidth / 2 - tImg.width / 2), (a.screen.availHeight / 2 - tImg.height / 2)); } } // --> </SCRIPT> </head> <BODY> <a href="#" onClick="popup_img('TEST.jpg', 'SOME TITLE')">TEST</a>

専門家に質問してみよう