現在開いているページURLの一部を読み込んで画像を表示させたい。

Question

現在開いているページURLが例えば

http://example.com/?num=12345

だとして

画像のアドレスが　http://test.jp/12345.jpg　として
任意の場所に表示をさせたいのですが方法がわかりません。
（アドレスの 12345 の部分が同じとなるので自動で表示させたい）

<div id="img"></div>

<script>
var img_id =xxxx;//
document.getElementById('img').innerHTML = '<img src="http://test.jp/+img_id+.jpg">';

</script>

このあたりのscriptかとは思いますが…
.location.href =

なども使用するかとは思います。素人なので調べても出てきませんでした。

現在開いているページURLの一部を指定して、それが画像のURLとなり、任意の場所へ表示する
ためのscriptを教えていただけますでしょうか。よろしくお願いします。

Comments

[m.ts10806]

質問編集画面タイトル横にある「初心者アイコン」をご活用ください。「初心者」と質問で書くよりも伝わりますし、質問一覧に表示されるのでわかりやすくなります。

[fudo]

今後に役立つ情報をありがとうございます！さっそく追加しました。

Answer 1

おそらく「探し方が分からない」のだとお見受けしました。

?num=12345

この部分「クエリストリング」と呼ばれています。
「javascript クエリストリング　取得」
などで調べれば取得の方法は出てきます。

例：

• javascriptでクエリ文字列を取得する
• JavaScript で, 華麗に URL パラメーターを取得してオブジェクトに変換する方法

「クエリストリング」を「URLパラメータ」に変更しても同じような記事が出てきます。

例：

• JavaScriptでURLパラメーターを取得し配列に格納しておく

location.searchを使う方法が多いですね。

locationオブジェクトのsearchプロパティは、現在ページURLのサーチ情報（?で始まる検索クエリ部分）を参照します。

Comments

[fudo]

ありがとうございます。さっそく調べてみます！

Answer 2

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

// クエリ文字列を取得
var queryString = window.location.search;
var imgId = "";
// 初めに1文字を削除し&で分割
queryString.slice(1).split("&").forEach(function(query) {
    // =で分割
    var querySet = query.split("=");
    // pid= だったら、imgIdにその文字列をセット
    if (querySet[0] === "pid") {
        imgId = querySet[1];
    }
} );

// 画像要素を探す
var imgElement = document.getElementById('img');
// 画像要素のsrc属性にURLをセット
imgElement.src = "http://img21.shop-pro.jp/PA01325/600/product/" + imgId + "_o1.jpg";

Comments

[fudo]

ありがとうございます。すみません。さらにお聞きしたいのですが、

http://antique-leaves.com/?pid=127379465

というurlのページの場合はどのようなコードを書けばよいでしょうか。
そのページ内の任意の場所に画像を読み込み、表示させたい場合は

いただいたscriptを編集して

<div id=""></div> をすきな場所に置けばよいのでしょうか。

この場合に読み込ませたい画像のurl は

http://img21.shop-pro.jp/PA01325/600/product/127379465_o1.jpg

です。

http://antique-leaves.com/?pid=130473544

というurlのページの場合の画像は

http://img21.shop-pro.jp/PA01325/600/product/130473544_o1.jpg

といった具合です。

説明が不十分ですが、よろしくお願いします。
また、こちらもいただいたscriptを試してみたいと思います。本当にありがとうございます。

[sagami1991]

<div id=""></div>ではなく、画像タグをそのまま置けばいいと思います。
<img id="img" src="" /> みたいな。

自分のコードは画像タグに直接URLをセットしてます。
クエリパラメータをpidに変えて、画像URLも変更したのを編集しておきました。

[fudo]

<div Id="img"></div>

<script>

var queryString = window.location.search;
var imgId = "";

queryString.slice(1).split("&").forEach(function(querySet) {

querySet.split("=");
// num=

if (querySet[0] === "pid") {
imgId = querySet[1];
}
} );

var imgElement = document.getElementById('img');
imgElement.src = "http://img21.shop-pro.jp/PA01325/600/product/" + imgId + "_o1.jpg";

</script>

[fudo]

ありがとうございます。
先程のは間違えて投稿しました。

さっそくやってみます！！

[fudo]

<img id="img" src="" />

<script>
var queryString = window.location.search;
var imgId = "";
// 初めに1文字を削除し&で分割
queryString.slice(1).split("&").forEach(function(querySet) {
// =で分割
querySet.split("=");
// pid= だったら、imgIdにその文字列をセット

if (querySet[0] === "pid") {
imgId = querySet[1];
}
} );
// 画像要素を探す
var imgElement = document.getElementById('img');
// 画像要素のsrc属性にURLをセット

imgElement.src = "http://img21.shop-pro.jp/PA01325/600/product/" + imgId + "_o1.jpg";

</script>

を試してみましたが、画像urlが
http://img21.shop-pro.jp/PA01325/600/product/_o1.jpg

となってしまいます。何度もすみません。どこか間違ってますでしょうか。

[sagami1991]

こちらのコードが誤っていました。以下の部分で変数への代入を忘れていました。
修正しておきました。
```javascript
// =で分割
querySet.split("=");

```

[fudo]

ありがとうございます！！できました！感激です。
説明まで書いてあるので大変勉強になりました。

本当にありがとうございました。