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

Question

画像をクリックするとwindow.htmlで新しいウインドウが開き、「IMG/AAA.jpeg」という値をwindow.htmlに渡して、画像を表示したいのですが、どのようにすればよいでしょうか。画像をクリック（photoOpnに値が渡される）→関数photoOpn実行（window.htmlに値が渡される）→window.html表示（値を受け取り画像を表示）といった具合にしたいのですが・・・。

ここまではやってみたのですが、window.htmlにどのように値を渡せばいいのでしょうか。

pick52 · Accepted Answer

>>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'] があるかどうか調べないとエラーが
でる可能性が...。

説明が下手なので却って分かりにくいかも知れませんがご了承ください。
かくコード部分の詳細はネットで調べた方が早くてもっと分かりやすく
説明している所があると思いますよ。
(そもそも上記はほとんどネットから集めた情報を組み合わせただけ
ですので)

15mm · Answer

なんかしっかりとした説明の後で私が首を突っ込むのは申し訳ないような気もしますが・・・＾＾；説明省略のため一部＃１の記述とかぶらせています。無駄なコメントは削除してください ■親のＨＴＭＬ

■window.html

15mm · Answer

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

pick52 · Answer

画像を直接開くのではなく、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); } }

こんな感じでどうでしょうか。

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

>>1

なんかしっかりとした説明の後で私が首を突っ込むのは申し訳ないような気もしますが・・・＾＾；

参考までに・・・

画像を直接開くのではなく、window.htmlを経由させたいのでしょうか。

似たような質問が見つかりました

このQ&Aを見た人はこんなQ&Aも見ています

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

このQ&Aを見た人がよく見るQ&A

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

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