JavaScriptのopenWindowで変数を使ってウィンドウのサイズ指定は可能か?

このQ&Aのポイント
  • JavaScriptのopenWindowを使ってウィンドウのサイズ指定に変数を使うことができるか疑問です。
  • 数字として渡した変数が文字として扱われてしまう可能性があるため、その挙動について調査しています。
  • 試した方法として、width2とheight2に変数を代入し、eval()を使用しましたがうまくいきませんでした。
回答を見る
  • ベストアンサー

openWin の width, height に変数は使える?

JavaScript の openWindow で ウィンドウのサイズ指定に変数を使うことは可能でしょうか? もしかすると数字として渡したものが文字として扱われてるような 気がするのですが、どなたかご存知でしょうか? width2, height2 に入れなおしたり eval() を使ってみたのですがうまくいきません。。。 width, height を 300 と直接指定した場合は動作します。 ブラウザは IE6, code はこちらです。 <html> <head> <title>[ ]</title> <meta http-equiv="content-type" content="text/html; charset=shift-jis"> <meta http-equiv="imagetoolbar" content="no"> <script language="JavaScript"><!-- function openWin(src, width1, height1) { var width2 = width1; var height2 = height1; width1 = eval(width1); height1 = eval(height1); window.open(src,'','directories=0, location=0, menubar=0, scrollbars=0, status=1, toolbar=0, resizable=1, width=width1, height=height1'); document.form1.text1.value = src + width1 + height1; return false; } //--></script> </head> <body topmargin="0" leftmargin="0" vlink="blue" alink="blue"> <a href="#" onclick="openWin('http://www.google.co.jp', 300, 300);">window</a> <form name="form1"> <input type="text" name="text1" size="40"> </form> </body> </html>

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

  • ベストアンサー
  • LancerVII
  • ベストアンサー率51% (1060/2054)
回答No.1

こんにちは。 ウィンドウ属性指定のところは単純な文字列と考えると以下のようにすれば動的に変更できると思います。 function ( src, width, height ) { window.open ( src, "", "width=" + width + ",height=" + height + ",status=1" ); } こうすると内部的にはwidth=300,height=300,status=1という文字列が出来上がっているので 関数に渡す値を変えてあげれば変更可能です。

yasu182
質問者

お礼

できました! Notepad を使ってたのでそのまま文字列として 扱われてたことに気付きませんでした。ありがとうございました!!

関連するQ&A

  • ひとつのHTMLファイル内にcanvasでグラフを2つ表示したいのです

    ひとつのHTMLファイル内にcanvasでグラフを2つ表示したいのですが 表示できなくて困っています。 以下のサイトを参考に、それぞれ1つのファイルに1つのグラフを表示はできました。 http://www.html5.jp/library/index.html また、グラフを上下入れ替えると後に書いたほうが有効になるようです。 どうしたら表示できるようになるか、わかる方アドバイスをお願いします。 以下headタグ以降をそのまま引用です。 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja"/> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>グラフ</title> <link href="sample_graph.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="rendering-mode.js"></script> <!--[if IE]><script type="text/javascript" src="./html5jp/excanvas/excanvas.js"></script><![endif]--> <script type="text/javascript" src="./html5jp/graph/circle.js"></script> <script type="text/javascript" src="./html5jp/graph/radar.js"></script> <script type="text/javascript"> window.onload = function() { var rc = new html5jp.graph.radar("sample_radar"); if( ! rc ) { return; } var items_radar = [ ["商品A", 3, 3, 2, 3, 1] ]; var params_radar = { aCap: ["A", "B","C", "D", "E"], aMax: 3, aMin: 0, legend: false } ; rc.draw(items_radar, params_radar); }; </script> <script type="text/javascript"> window.onload = function(){ var cg = new html5jp.graph.circle("sample_circle"); if( ! cg ) { return; } var items1 = [ ["A", 9, ], ["B", 3, ], ["C", 0,] ]; cg.draw(items1); }; </script> </head> <body> <div><canvas width="300" height="200" id="sample_radar"></canvas></div> <div><canvas width="300" height="200" id="sample_circle"></canvas></div> </body> </html>

  • javascriptを使い、サムネイル表示

    サンプルHP⇒http://cartown.jp/detail_dt.php?car_id=1990056 のような、サムネイル画像と拡大画像を表示させる記述方法を 教えてください。 下記のような回答文を確認したのですが、img要素を列挙する記述やonclickイベントを結びつける記述すらわかりません。こんな超初心者ですが、よろしくお願い致します。 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ <html> <head> <meta http-equiv="Content-Language" content="ja"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>サンプル</title> <script type="text/javascript"> function showImg(){ document.getElementById("image").src=this.src; } function setup(){ var thumbnails=document.getElementsByName("thumbnail");//name="thumbnail"とついているimg要素を列挙 for(var i=0;i<thumbnails.length;i++)thumbnails[i].onclick=showImg;//↑で列挙したものにonclickイベントを結びつける } window.onload=setup; </script> <style type="text/css"> .main td{ width:300px; height:300px; } </style> </head> <body> <table border class="main"> <tr> <td><img id="image" width="300" height="300"></td> <td> 文章 </td> </tr> </table> <!--ここから下の画像はサムネイル用ではなく、上に表示する予定の画像と同じもので width属性とheight属性を指定して大きさを変えています。(ここでは全部300x300の画像とします。)--> <table border> <tr> <td><img name="thumbnail" src="img1.png" width="48" height="48"></td> <td><img name="thumbnail" src="img2.png" width="48" height="48"></td> <td><img name="thumbnail" src="img3.png" width="48" height="48"></td> <td><img name="thumbnail" src="img4.png" width="48" height="48"></td> <td><img name="thumbnail" src="img5.png" width="48" height="48"></td> </tr> <tr> <td><img name="thumbnail" src="img6.png" width="48" height="48"></td> <td><img name="thumbnail" src="img7.png" width="48" height="48"></td> <td><img name="thumbnail" src="img8.png" width="48" height="48"></td> <td><img name="thumbnail" src="img9.png" width="48" height="48"></td> <td><img name="thumbnail" src="img10.png" width="48" height="48"></td> </tr> </table> サムネイルクリックで拡大します。 </body> </html>

  • javascriptで別ウインドウを開いたのですが背景設置が上手くいきません。

    いつもお世話になっております。 JavaScriptを使用し別ウインドウで画像を表示させているのですが、 そのウインドウの背景が上手く設定できません。 どのように編集すればよいでしょうか? 現在の状態は以下の通りです。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>aaa</title> <script language="javascript"> <!-- function OpenWindow(){ var width = document.images['00'].width + 228; var height = document.images['00'].height +254; subWin = window.open("","subWin","status=no,menubar=no,toolbar=no,scrollbars=no,resizable=yes,screenX=0,screenY=0,width=" + width + ",height=" + height + '"'); with(subWin.document) { open(); write("<html><head><title>sample1</title></head>"); write("<body onload='window.resizeTo( document.images[00].width + 40,document.images[00].height + 120)'><div align='center'><img id='00' src='b/1b.jpg'><br>"); write("<button type='button' onclick='window.close()'>閉じる</button></body></div></html>"); close(); } } --> </script></head> 宜しくお願いします。

  • ajax画像変更

    すみませんがAjaxを使って,最初にネコの絵を表示しておき,変更ボタンを押したら犬の絵を表示するプログラムを作成したいのですが以下のプログラムでは表示できませんでした。どなたか教えてください cat.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>画像変更</title> <script type="text/javascript"> <!-- XmlsReq = false; if(window.XMLHttpRequest) { XmlsReq = new XMLHttpRequest(); } else if(window.ActiveXObject) { try { XmlsReq = new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) { XmlsReq = new ActiveXObject("Microsoft.XMLHTTP"); } } function LoadHtml(src, uri) { if (!XmlsReq) return; XmlsReq.open('GET', uri); XmlsReq.send(null) XmlsReq.onreadystatechange=function() { if (XmlsReq.readyState==4 && XmlsReq.status == 200) { document.getElementBySRC(src).innerHTML = XmlsReq.responseText; } } } //--> </script> </head> <body> <img src="cat.jpg" style="width" :600px;height:400px"> ここにHTMLファイルを読み込みます。</img> <form src="Ajax_Form"> <input type="button" src="change" value="変更" onClick="LoadHtml('cat.jpg','dog.html')"> </form> </body> </html> dog.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" > <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <meta http-equiv="Content-Style-Type" content="text/css"> <title>画像変更</title> </head> <body> <image src="dog.jpg"> 読み込みました。 </image> </body> </html>

  • IEでfor()が機能しないのはなぜ?解決方法は?

    下記プログラムでは、 ボタンを押すとカウントダウンが開始され、 0になったときに、table内の100x100の画像4枚を 一気に1枚の244x244の画像と切り替えるというものです。 Firefoxではカウントダウンが実行された後に、 画像が切り替わるのですが、 IEではカウントダウンが実行されずに 画像が切り替わってしまいます。 特にエラーメッセージは出ません。 IEでもちゃんとカウントダウンをさせた後に 画像の切換えをしたいのですが、どうすればいいのでしょうか? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title></title> <style type="text/css"> <!-- #xxx{ position: absolute; top: 110px; left: 50px; } table{ border-spacing:0; border-collapse:collapse; } td{ border:1px solid #000; padding:10px; width:100px; height:100px; } //--> </style> <script language="JavaScript"> <!-- function start(){ document.mF.ttt.value = "まだ切換えていません"; } function kirikae(){ for(var i=5; 0<=i; i--){ alert(i);  //カウントダウン if(i==0){  //カウントダウンが0になったら xxx.innerHTML = '<img src="r.gif" width="244" height="244">'; //画像切換え document.mF.ttt.value = "切換えました"; } } } //--> </script> </head> <body onload="start()"> <form name="mF"> <div id="xxx"> <table> <tr> <td><img src="1.jpg" width="100" height="100"></td> <td><img src="2.jpg" width="100" height="100"></td> </tr> <tr> <td><img src="3.jpg" width="100" height="100"></td> <td><img src="4.jpg" width="100" height="100"></td> </tr> </table> </div> <input type="button" value="全画像の切換え" onclick="kirikae()"> <input type="text" name="ttt"> </form> </body> </html>

  • JavaScript/jQuery で元画像ファイルのサイズの取得

    JavaScript/jQuery で元画像ファイルのサイズの取得 次のコードを考えましたが、動作が不確定な点があります。状況と対応方策をお教えください。 <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" src="subf/jquery-1.4.2.min.js"></script> <script type="text/javascript"> var pW; var pH; $(function() { newImg(); alert(pW); alert(pH); }); function newImg() { var newImg = new Image(); newImg.src = 'subf/' + "HighJinks_Ni.jpg"; alert("New Image"); //この行をコメントとすると pW=0,pH=0 となる。   pW=(newImg.width); pH=(newImg.height); } </script> </head> <body> </body> </html>  上のコードで画像のwidth とheight の値が得られるのですが、alert("New Image"); の行をコメントとすると、正確な値得られず0となります。  対応の方法をお教えください。

  • グローバル変数とローカル変数について

    今JavaScriptを勉強している初心者です。 実は、ある本に書かれているソースコードでグローバル変数とローカル変数の違いがよく分からなくなりましてここに質問させて頂く次第です。 まずは、ソースコードを書きます。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-type" content="text/html; charset=UTF-8"> <title>変数のスコープ</title> <script type="text/javascript"> function testFunc(){ var num; num=5; } </script> </head> <body bgcolor="#FFFFFF"> <p style="font-size:200%"> <script type="text/javascript"> var num=3; testFunc(); document.write(num, "<br>") </script> </p> </body> </html> このままだとブラウザに表示されるのはグローバル変数「3」になるというのも今一分からないのですが。 この次に<head>部分の var num; をコメントにします。 すると、何故かローカル変数「5」がグローバル変数になり、<body>部分のtestFunc()メソッドの結果ブラウザに表示される値が「5」になるというものです。 var num; をコメントとする事はnumは変数宣言されていないことになります。 なのに num = 5; が成り立つのもよく分かりません。 そこでアドバイスを頂きたくここに書き込む事にしました。 是非とも宜しくお願い致します。

  • java scriptによるポップアップウインドウについて

    <head> <SCRIPT language="JavaScript"> <!-- function OpenWin1(){ win=window.open("window1.html","new","width=300,height=100"); } // --> <!-- function OpenWin2(){ win=window.open("window2.html","new","width=500,height=200"); } // --> </SCRIPT> </head> <body bgcolor="#FFFFFF" text="#000000"> <A href="javascript:OpenWin1()">1.ウィンドウを開く</A> <A href="javascript:OpenWin2()">2.ウィンドウを開く</A> </body> 「1.ウィンドウを開く」をクリックしてwindow1.htmlのポップアップウインドウを表示させたまま、「2.ウィンドウを開く」をクリックすると、最初のウインドウサイズを保持したまま、新しいウインドウが開いてしまうのですが、これをうまく処理する方法はないのでしょうか? どなたかアドバイス頂けると嬉しいです。 よろしくお願い致します。

  • プログラムのみで複雑に画像を変える方法役

    クリックすると画像が次々と変わるものを作りたいのですが、 下記方法では画像の枚数が増えたり、複雑な動作を作る場合、 複雑な構造になってしまうと思うのですが、 少しでも複雑にならない方法はありますか? フラッシュは使わずにプログラムだけで 同じ位置で画像を変えたいです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title></title> <script language="JavaScript"> <!-- var img1 = new Image(100,50); var img2 = new Image(100,50); var img3 = new Image(100,50); var img1.src = "sample1.gif"; var img2.src = "sample2.gif"; var img3.src = "sample3.gif"; function mF1(){ document.images[0].src = img1.src; setTimeout("mF2()",100); } function mF2(){ document.images[0].src = img2.src; setTimeout("mF3()",100); } function mF2(){ document.images[0].src = img3.src; } //--> </script> </head> <body> <img src="omote.jpg" width="100" height="50" onclick="mF1()"> </body> </html> あと、document.images[0].srcを変数として格納すると動作しないのですが、 document~というのは変数にできないのでしょうか。 var dcum = document.images[0].src; function mF1(){ dcum = img1.src; setTimeout("mF2()",100); } function mF2(){ dcum = img2.src; setTimeout("mF3()",100); } function mF2(){ dcum = img3.src; }

  • 背景に指定したイメージ以外の余白を見せないようにする方法は?

    こんにちは!まさにタイトル通りの質問です。 <HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS"> <META NAME=""> <META NAME=""> <META NAME=""> <META NAME=""> <META http-equiv="refresh" content="5;url=test.html"> <SCRIPT LANGUAGE="JavaScript"> <!-- function resizeWindow(){      window.resizeTo(720,580);  } //--> </SCRIPT> <title>test</title> <style type="text/css"><!-- body { background-repeat:no-repeat;} --></style> </HEAD> <body onLoad="resizeWindow()" background="top4.jpg" width=720 height=580 > </body> </HTML> としていますが、窓を大きくしたりすると右や下に余白が見えてかっこわるいです。どうすれば改善しますか? お願いします☆

    • ベストアンサー
    • HTML

専門家に質問してみよう