• ベストアンサー

window.openで値の渡し方を教えてください。

画像をクリックするとwindow.htmlで新しいウインドウが開き、「IMG/AAA.jpeg」という値をwindow.htmlに渡して、画像を表示したいのですが、どのようにすればよいでしょうか。 画像をクリック（photoOpnに値が渡される）→関数photoOpn実行（window.htmlに値が渡される）→window.html表示（値を受け取り画像を表示）といった具合にしたいのですが・・・。 <html> <head> <script type="text/javascript"><!-- photoOpn(value){ window.open("window.html"); } //--></script> </head> <body> <a href="javascript:photoOpn('IMG/AAA.jpeg')"><img src="IMG/AAA.jpeg"></a> </body> ここまではやってみたのですが、window.htmlにどのように値を渡せばいいのでしょうか。

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

  • ベストアンサー
  • pick52
  • ベストアンサー率35% (166/466)
回答No.3

>>1 > 結構複雑になってしまいますね。Javascriptを勉強してまもないので > 難しく感じてしまいます（笑） > 図々しいとは思いますが、少しながら関数等のscriptの説明をして > 頂けませんでしょうか。 すみませんでした。 自分でやるときもなかなかコメントつける癖がなくて暫く経ったら 自分の書いたコードさえ解読できなくなることが多々あったりします。 それでも、コメント書くのが面倒だったりそもそも適切なコメントが 思い浮かばずつい、省略してしまうことが多くて自分でも困っていたり します。(^_^; やっていること自体は決して複雑ではないはずなんですけど、確かに 難しいかも知れませんね。 // URL エンコード url = encodeURIComponent(url); これはURLエンコードしています。 クエリに非ASCII文字列などを含めるときはURLエンコードします。 スラッシュはディレクトリ区切りとしても使用されているのでURLと しては使用可能ですが念のためにURLエンコードしています。 因みにJavaScriptにはURLエンコードする関数がいくつかありますが スラッシュをエンコードできるのは上記の関数のみのようです。 また、日本語などの文字列が含まれる場合、元の文字列が何であっても 強制的にUTF-8としてURLエンコードしてしまいますのでご注意ください。 window.open('window.html?url=' + url); これはそのまま、URLにクエリを追加して渡しているだけです。 var query = location.search.substr(1).split('&'); ここが一番分かりにくい可能性がありますが location.search はURLのクエリの部分(?含む)を文字列オブジェクトとして返します。 .substr(1) は1文字目(?を飛ばす)移行を取得しています。 .split('&') は '&' を区切りとして分割し配列として返します。 (念のため複数のクエリが渡されたときを考慮して) var base = './'; これは画像ファイルのURLパスです。 相対パスと絶対パスどちらも指定できます。 最後は必ずスラッシュで終わってください。 if(query != '') { これはクエリがから文字列でなかったらという条件文です。 この条件に一致したらこれ以降のブロックを実行します。 var req = new Array(); for(var i = 0; i < query.length; i++) { var key = query[i].split('='); req[decodeURIComponent(key[0])] = decodeURIComponent(key[1]); } ここは、各クエリを連想配列に代入しています。 ここはPerlCGIなどで使用されている部分をそのままJavaScriptに 移植してみました。 代入するときにキーと値の両方をURLデコードしています。 var img = document.createElement('img'); img.setAttribute('src', base + req['url']); document.getElementById('img').appendChild(img); ここは img エレメントを作成し、 'img' のIDをもつエレメントの 子要素として作成した img エレメントを追加しています。 あと、うっかり忘れていて説明している段階で気がついたのですが 上記のコードの前に req['url'] があるかどうか調べないとエラーが でる可能性が...。 説明が下手なので却って分かりにくいかも知れませんがご了承ください。 かくコード部分の詳細はネットで調べた方が早くてもっと分かりやすく 説明している所があると思いますよ。 (そもそも上記はほとんどネットから集めた情報を組み合わせただけ ですので)

hamu1985
質問者

お礼

ご回答ありがとうございました。 詳細の説明までありがとうございます！ パッとみると難しいですが、説明をいただけると理解しやすいです。 このソースコードをコピペして勉強してみたいとおもいます。 ほんとうありがとうございました。

その他の回答 (3)

  • 15mm
  • ベストアンサー率65% (65/100)
回答No.4

なんかしっかりとした説明の後で私が首を突っ込むのは申し訳ないような気もしますが・・・＾＾； 説明省略のため一部＃１の記述とかぶらせています。無駄なコメントは削除してください ■親のＨＴＭＬ <html> <head> <script type="text/javascript"><!-- function photoOpn(value){//"function "ってつけなくても動作するんですかね？ window.open("window.html"); url=value;//ここと } var url;//ここ（は一応）を追加 //--></script> </head><body><a href="javascript:photoOpn('IMG/AAA.jpeg')"><img src="IMG/AAA.jpeg"></a></body> ■window.html <html><head><script type="text/javascript"><!-- window.onload=function(){//このウィンドウの読み込みが終わったらfunction(){}内を実行 var img = document.createElement('img'); img.setAttribute('src',opener.url);//window.openでこのhtmlを開いたウィンドウの、urlという変数を参照 document.getElementById('img').appendChild(img); } //--></script></head><body><div id="img"></div></body>

hamu1985
質問者

お礼

ご回答ありがとうございました。 説明していただきありがとうございます。大変参考になります。 少しずつ勉強していきたいと思います。

  • 15mm
  • ベストアンサー率65% (65/100)
回答No.2

参考までに・・・ 値を渡さずに、 window.htmlから、親ウィンドウのＵＲＬ文字列を格納した変数を参照し、 <img>を生成、もしくはloadingなどの画像を用意しておき、src=""を書き換え といった処理でも可能です。

hamu1985
質問者

お礼

ご回答ありがとうございます。 具体的にどのようなscriptを書けばよいのでしょうか。 すみませんが、ご教授おねがいできませんでしょうか。

  • pick52
  • ベストアンサー率35% (166/466)
回答No.1

画像を直接開くのではなく、window.htmlを経由させたいのでしょうか。 取り敢えず、 // 元の HTML 側の JavaScript function photoOpn(url) { // URL エンコード url = encodeURIComponent(url); window.open('window.html?url=' + url); } // 開く側の JavaScript function viewimg() { var query = location.search.substr(1).split('&'); var base = './'; // ベースとなる URL if(query != '') { var req = new Array(); for(var i = 0; i < query.length; i++) { var key = query[i].split('='); req[decodeURIComponent(key[0])] = decodeURIComponent(key[1]); } var img = document.createElement('img'); img.setAttribute('src', base + req['url']); document.getElementById('img').appendChild(img); } } <!-- 開く側の HTML --> <body onload="viewimg();"> <div id="img"></div> こんな感じでどうでしょうか。

hamu1985
質問者

お礼

ご回答ありがとうございます。 結構複雑になってしまいますね。Javascriptを勉強してまもないので難しく感じてしまいます（笑） 図々しいとは思いますが、少しながら関数等のscriptの説明をして頂けませんでしょうか。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • 外部jsファイルにwindow.openを記述するとmacIEで動かない場合

    他の質問にこの条件のケースがなかったので質問させていただきます。よろしくお願いします。 親ページからサブウインドウを開こうとして、 macのＩＥだけ確認できません。 ファイルは以下のように作成しました。 wopen.jsファイルを作成して、そこに function wopen(URL){ window.open("aaa.html", "wopen", "toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,width=600,height=600"); } と記述して HTMLに <head> <SCRIPT TYPE="text/javascript" SRC="wopen.js"></SCRIPT> </head> <body> <a href="javascript:wopen( )"><img src="a.gif"></a> </body> なぜなのかわからないので、 すみませんがよろしくお願いします。

  • window openについて

    こんにちは、例えば以下のようなスクリプトがあったとします。 <html> <form name = serchform> <input type=text name=id><br> <input type=submit value=ID検索 onclick="openwin()"> <a href="javascript:open(1);"><Img Src="1.bmp"></a><br> <a href="javascript:open(2);"><Img Src="2.bmp"></a><br> <script type="text/javascript"><!-- function openwin() { a = document.serchform.id.value; url = "http://10.8.2.166/test/syuhou_kensaku.php?id="+a; mywin = window.open(url,"","width=1120,height=500"); } function open(select) { if(aa == 1){ alert("Test") url2="http://10.8.2.166/test/kensaku.php?msg="+Testです; mywin2 = window.open(url2,"",""); } } //--></script> このソースを実行すると、ID検索ボタンをクリックしても何も反応せず 1.bmpをクリックすると、Testとメッセージが表示され、画面左下に 警告マークが表示され、何も反応しません。 しかし、function open(select)を削除し、ID検索ボタンをクリック すると命令した処理を実行してくれます。 function openwin()を削除したらその逆も起きるのかと考えやって みたのですが、これについては上記と同じエラーでした。 なぜこのようになるのか原因が分かりません。 どなたかご存知の方がいらっしゃいましたら、アドバイスよろしく お願い致します。

  • window.openについて

    window.openを使って新しいウインドウを開きたいと思い質問させていただきます。 現在、 ---------------------------------------------------------------- <script type="text/javascript"> <!-- function w_opn() { newWin = window.open("abc.html","","width=200,height=300"); win.moveTo(0,0); } // --> </script> そして、BODY内に <a href="javascript:w_opn()">開く</a> --------------------------------------------------------------- というふうに作成しています。 この方法だと、リンク元が複数ある場合、HEAD内のJavaScriptも複数記述しないといけないと思うのですが、これをひとつのJavaScriptで制御したいのです。 どなたかご教授願えませんか？参考になるサイトのURLでも構いません。

  • 新ウィンドウの画像をクリックして閉じる

    画像を載せたホームページを作成しています。 target="_blank"で新ウィンドウで開いた画像をクリックして、新ウィンドウを閉じるにはどうしたら良いのでしょうか？ これじゃダメなんでしょうか？ <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <SCRIPT LANGUAGE="JavaScript"> <!-- function WinCls(){ window.close() } //--> </SCRIPT> <TITLE></TITLE> </HEAD> <BODY> <A href="aaa.jpg" javascript:WinCls()" target="_blank"><IMG src="aaa.jpg"></A> </BODY> </HTML>

  • JavaScript window.openで開く際、そのwindowの背景色を指定したい

    親ウィンドウにある画像のサムネイルをクリックすると、子windowにその画像の大きいものが表示されるHTMLを作っています。 その際に、子windowの背景色を黒くしたいのですが、うまくいきません。以下にソースを記載します。 【HTML】 <a href="javascript:void(0);" onClick="winopen('1.jpg')"><img src="1s.jpg" /></a> 【JavaScript】 function winopen(filename) {var w=window.open(filename,'','width=900,Height=700'); w.focus(); w.document.write("<body bgcolor=black>"); } このようになっているのですが、これだとw.document.write("<body bgcolor=black>")のところで、窓全体が黒くなってしまい、jpgがなくなってしまいます。 jpgの背景を黒くしたいのですが、どのようにしたらよいでしょうか？

  • JavaScriptのwindowcloseとボタンのロールオーバーの組み合わせ方

    いまHPを作成中です。 そのなかでクリックすると、指定された大きさで表示される別ウィンドウがあります。 そのウインドウに次の2つのJavaScriptを使いたいのです。 ひとつひとつなら出来るのですが、二つを組み合わせるとどう書いていいのかわかりません。 しかも、ふたつともhead内に書き込むにはどうしたらいいですか？ １、ウインドウに「閉じる」ボタンを付けたい ２、そのボタンはロールオーバー効果を使ってマウスがオーバーのときはボタンが変化するよう、別のgifを表示したい 1,2の詳しい内容です。 1<a href="javascript:window.close();"></a> 2<head> <title>ロールオーバーイメージ</title> <script language="JavaScript"> <!-- function changeImage1(){ document.myimg.src="img2.gif"; } function changeImage2(){ document.myimg.src="img1.gif"; } // --> </script> </head> <body> <p> <a href="javascript:;" onMouseOver="changeImage1()" onMouseOut="changeImage2()"><IMG src="img1.gif" name="myimg" border=0></a> </p> </body>

  • JavaScript onClick

    JavaScript初心者です。 クリックしたら音が出るようにしたいのですが音がでません。 どなたかご回答よろしくお願いします。 <html> <head> <script language = "JavaScript"> <!-- function sound(name){ document.all.music.src = name; } --> </script> </head> <body> <bgsound src = # id = music autostart = true loop = true> <a href = # onClick = sound("img/oto.mp3")> <img src="img/picture.jpg"> </a> </body> </html>

  • 別窓リンクの問題点は？

    画像リンクによる別窓表示で下記の一行のみのソースをリンクとして別窓表示しています。この方法でのデメリットはありますでしょうか？ -------------------------------------------------------------- <body> <a href="javascript:void window.open('test.html',null,'height=450,width=300,menubar=no,toolbar=no,scrollbars=no');"><img src="test.gif"></a> </body> -------------------------------------------------------------- サイト検索で見かける別窓表示のソース↓ <head> <script language="JavaScript"> function openWindow(i) { window.open("sample" + i + ".html","","width=700, height=600"); } </script> </head> <body> <a href="javascript:openWindow('1')">sample1.html</a><br /> </body> これとの比較したときの問題は？

  • 連続したURLへのwindow.openの指定方法

    JavaScript初心者です。 画像のサムネイル一覧のページがあり、サムネイルをクリックすると元の画像が別ページで開く というページを作っています。 今は <a href="元の画像.jpg" target="_blank"><img src="サムネイル.jpg"></a> としているのですが、window.openを使ってウィンドウのサイズ指定を行いたいと考えております。 画像ファイル名が"001.jpg","002.jpg","003.jpg"…となっている場合、その画像のサイズを取得してそのサイズにウィンドウを開くスクリプトを教えてください。 宜しくお願いします。

  • JavaScriptの画像入れ替えについて

    下記のようなものでサムネイルをクリックすると大きな画面に表示される、みたいなものを作っています。しかし職場のIE6でクリックすると表示されなく大きな画像が消えてしまいます。 ちなみに自宅のIE６で確認したときは大丈夫だったのですが、、、 またサムネイル画像のアンカー部分のjavasscript:void(0);を消すと表示されるようになるのですが、やはりここのvoid0には問題があるのでしょうか？？ またサーバーにUPする前オンライン上ではなくPCで確認している時はちゃんと表示できていたました。 あまり詳しくないものでどなたかよろしくお願い致します。 <script type="text/javascript"> <!-- function imgch(url) { document.getElementById("image").src=url; } //--> </script> <style type="text/css"> img { border:none; } </style> </head> <body> <img src="image/2.jpg" width="500" height="500" id="image" /> <a href="javascript:void(0);"><img src="image/2.jpg" width="50" height="50" onClick="imgch(this.src)" ></a> <a href="javascript:void(0);"><img src="image/3.jpg" width="50" height="50" onClick="imgch(this.src)" ></a> <a href="javascript:void(0);"><img src="image/3.jpg" width="50" height="50" onClick="imgch(this.src)" ></a> </body>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する