- ベストアンサー
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にどのように値を渡せばいいのでしょうか。
- hamu1985
- お礼率44% (220/498)
- JavaScript
- 回答数4
- ありがとう数5
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
>>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'] があるかどうか調べないとエラーが でる可能性が...。 説明が下手なので却って分かりにくいかも知れませんがご了承ください。 かくコード部分の詳細はネットで調べた方が早くてもっと分かりやすく 説明している所があると思いますよ。 (そもそも上記はほとんどネットから集めた情報を組み合わせただけ ですので)
その他の回答 (3)
- 15mm
- ベストアンサー率65% (65/100)
なんかしっかりとした説明の後で私が首を突っ込むのは申し訳ないような気もしますが・・・＾＾； 説明省略のため一部＃１の記述とかぶらせています。無駄なコメントは削除してください ■親のＨＴＭＬ <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>
お礼
ご回答ありがとうございました。 説明していただきありがとうございます。大変参考になります。 少しずつ勉強していきたいと思います。
- 15mm
- ベストアンサー率65% (65/100)
参考までに・・・ 値を渡さずに、 window.htmlから、親ウィンドウのＵＲＬ文字列を格納した変数を参照し、 <img>を生成、もしくはloadingなどの画像を用意しておき、src=""を書き換え といった処理でも可能です。
お礼
ご回答ありがとうございます。 具体的にどのようなscriptを書けばよいのでしょうか。 すみませんが、ご教授おねがいできませんでしょうか。
- pick52
- ベストアンサー率35% (166/466)
画像を直接開くのではなく、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> こんな感じでどうでしょうか。
お礼
ご回答ありがとうございます。 結構複雑になってしまいますね。Javascriptを勉強してまもないので難しく感じてしまいます（笑） 図々しいとは思いますが、少しながら関数等のscriptの説明をして頂けませんでしょうか。
お礼
ご回答ありがとうございました。 詳細の説明までありがとうございます！ パッとみると難しいですが、説明をいただけると理解しやすいです。 このソースコードをコピペして勉強してみたいとおもいます。 ほんとうありがとうございました。