重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

【GOLF me！】初月無料お試し

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

解決済

  • 質問者：hamu1985
  • 質問日時：
  • 回答数：4件

画像をクリックすると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にどのように値を渡せばいいのでしょうか。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (4件)

No.3ベストアンサー

  • 回答者： pick52
  • 回答日時：

>>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'] があるかどうか調べないとエラーが
でる可能性が...。

説明が下手なので却って分かりにくいかも知れませんがご了承ください。
かくコード部分の詳細はネットで調べた方が早くてもっと分かりやすく
説明している所があると思いますよ。
(そもそも上記はほとんどネットから集めた情報を組み合わせただけ
ですので)
    • good
    • 1
    • 件
通報する
この回答へのお礼

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

ほんとうありがとうございました。

通報する
お礼日時：2008/08/13 17:15

No.4

  • 回答者： 15mm
  • 回答日時：

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


説明省略のため一部＃１の記述とかぶらせています。無駄なコメントは削除してください

■親のＨＴＭＬ
<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>
    • good
    • 1
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2008/08/13 17:16

No.2

  • 回答者： 15mm
  • 回答日時：

参考までに・・・


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

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

通報する
お礼日時：2008/08/03 21:13

No.1

  • 回答者： pick52
  • 回答日時：

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

こんな感じでどうでしょうか。
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2008/08/03 21:11

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

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

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

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

おすすめ情報