![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
画像をクリックすると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にどのように値を渡せばいいのでしょうか。
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'] があるかどうか調べないとエラーが
でる可能性が...。
説明が下手なので却って分かりにくいかも知れませんがご了承ください。
かくコード部分の詳細はネットで調べた方が早くてもっと分かりやすく
説明している所があると思いますよ。
(そもそも上記はほとんどネットから集めた情報を組み合わせただけ
ですので)
ご回答ありがとうございました。
詳細の説明までありがとうございます!
パッとみると難しいですが、説明をいただけると理解しやすいです。
このソースコードをコピペして勉強してみたいとおもいます。
ほんとうありがとうございました。
No.4
- 回答日時:
なんかしっかりとした説明の後で私が首を突っ込むのは申し訳ないような気もしますが・・・^^;
説明省略のため一部#1の記述とかぶらせています。無駄なコメントは削除してください
■親のHTML
<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>
ご回答ありがとうございました。
説明していただきありがとうございます。大変参考になります。
少しずつ勉強していきたいと思います。
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>
こんな感じでどうでしょうか。
ご回答ありがとうございます。
結構複雑になってしまいますね。Javascriptを勉強してまもないので難しく感じてしまいます(笑)
図々しいとは思いますが、少しながら関数等のscriptの説明をして頂けませんでしょうか。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS flex の各子要素を横幅 100% にしたい 1 2022/09/22 21:25
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- CGI htmlからパラメータで、cgiに渡したい。 1 2023/02/06 16:15
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
このQ&Aを見た人はこんなQ&Aも見ています
-
「どうして捨てられないの?」前妻の物を捨てられない男性の心理って?
前妻の物を捨てられない理由に加え、捨てるための手段はあるのかを専門家に聞いてみた!
-
javascriptで開いたウィンドウに値を渡す
JavaScript
-
Javascript_submit()完了後に処理したい
JavaScript
-
window.Openをモーダルにできますか?
JavaScript
-
-
4
openerは使えないのでしょうか?
JavaScript
-
5
javascriptでASPにデータを渡す
JavaScript
-
6
getElementByIdの戻り値がnullになります。
JavaScript
-
7
別ウィンドウへのsubmitの挙動がおかしいです
JavaScript
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
JavaScriptを外部ファイルにす...
-
前回の質問の続き
-
iframe内のリンク文字のマウス...
-
HTMLですCSSです 画像のように...
-
HTMLタグに複数のクラスを設定...
-
JavaScript で flexslider の画...
-
[jQuery]bxSlider 一番最後と...
-
htmlのstyleのposition:relativ...
-
jspでcssが読み込めない
-
javascriptテキストBOX色を元に...
-
borderがおかしくなる・・・
-
html内にスライドショーを複数設置
-
「画像クリックで音声再生」を ...
-
クリッカブルマップとインライ...
-
SeesaaブログにBlogPeople (...
-
JSPでの画像ファイル表示
-
画像の重なりの順序を代える方...
-
クリックして変更した画像を他...
-
CSS <div>の入れ子が反映さ...
-
jquery ドロップダウンメニュー...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
window.openで値の渡し方を教え...
-
this.src等のthisについて
-
imgのsrcに値を設定するには
-
jQueryでサーバー上のファイル...
-
画像の座標位置取得
-
イベントハンドラを完全に外部...
-
連番画像「次へ」「前へ」で、...
-
画像の下に説明文をつけて切り...
-
JS switch文について
-
JavaScriptでリクエストを飛ば...
-
スマートな外部javaでロールオ...
-
JavaScriptでシンプルなスライ...
-
一定時間で画像とリンク先を変...
-
javascript 時計24時間表示
-
画像と文字を同時に切り替えたい
-
これはどんなJavaScriptなので...
-
Javaにて画像を残像が残りつつ...
-
FirefoxでonMouseOver/Outの動...
-
divの背景画像を、徐々に表示さ...
-
時間によって表示される画像を...
おすすめ情報