2

大変お世話になっております。

下記のURLはindex.htmlというページのURLになりますが、そのクエリパラメータであるidの値(256)をindex.html内でjavascriptなどを利用して取得し、その下にあるinputのvalueに代入し送信できるようにしたいのですが、(下記の例では、xxxに256が代入されるような設定にしたいです。)どのような記述にすべきかご教授頂けませんでしょうか。

いろいろと試しておりますが、値を代入できず、しかしながら、xxxを256と手入力し送信すると、期待通りに値が次ページ以降に渡ります。

http://www.xxxx.com?id=256

index.html

<script>;
</script>

<form method="post">
<input type="number" name="id" id="id" value="xxx">
</form>

追記

Faily Feely様の回答を基に試した記述を上段にて変更致しました。value=""の様に空欄に致しました。しかしながら、値を取得していない様でございます。記述のどこに問題があるかご教示頂けませんでしょうか。

<script type="text/javascript">

// 現在のURLを表すURLオブジェクトを作成
const url = new URL(location.href);

// searchParamsから目的のクエリパラメータを取得(今回はid)
const id = url.searchParams.get("id"); 

document.getElementById('id').value = id;

</script>

<form method="post">
<input type="number" name="id" id="id" value="">
</form>

追記 2

<script type="text/javascript"> 
// 現在のURLを表すURLオブジェクトを作成
const url = new URL(location.href);

// searchParamsから目的のクエリパラメータを取得(今回はid)
const id = url.searchParams.get("id");
</script>

<script type="text/javascript"> 
document.addEventListener('DOMContentLoaded', function() {
// ページが読み込まれたあとに実行される部分
document.getElementById('id').value = id;
});
</script>

<form method="post">
<input type="number" name="id" id="id" value="">
</form>

Faily Feely様、

ご教示の基に、上記の記述、およびあれこれと変更しながら試しましたが、どうしてもクエリパラメータの値を取得できなく、urlにクエリパラメータおよび値はあるのですが、(見えている)のですが、システムの構成上、実際は存在しない、あるいはjsで読めないということはあり得るでしょうか。送信先のページでvar_dumpを試すとNULLではなく、以下が表示されます。

["id"]=> string(0) ""

また、上記の上から2番目の記述を以下の様に手入力すると次ページに値が渡ります。ですのでurlからクエリパラメータの値の取得に関して何等かの問題があるのかなと考えております。

const id = '256';

追記 3

Faily Feely様、

Chrome バージョン 49.0.2623.112環境下のF12で以下の3つエラーが検出されました。

1.Failed to set referrer policy: The value 'strict-origin' is not one of  'always', 'default', 'never', 'no-referrer', 'no-referrer-when-downgrade', 'origin', 'origin-when-crossorigin', or 'unsafe-url'. This document's  referrer policy has been left unchanged.
2.Failed to load resource: net::ERR_FAILED
3.Unrecognized Content-Security-Policy directive 'worker-src'.

そして、複数のブラウザーで試したところ、パラメータを取得できたものもありました。ご教授感謝致します。

○取得成功 ×取得できず
Chrome バージョン 49.0.2623.112 ×
Chrome バージョン 70.0.3538.110 ○
Safari バージョン不明 ×
IE バージョン不明 ×
Edge バージョン不明 ○

エラーの内容から、JSの記述に補足文を付け足せば問題がなくなりますでしょうか。

ブラウザー、そしてそのバージョン依存ということは、当サイトの性質上、全てのブラウザーおよびそのバージョンに対応しなければなりませんので、やはり、location searchの方法でためした方が後々良いかもしれませんね。

もし、その場合、上記の記述に多少の記述の付け足しだけで事足りますでしょうか。

2
  • ドメイン直下のindex.htmlにアクセスするならhttp://www.xxxx.com/?id=256になりませんかね?質問文に書かれた例は/が足りないのが気になります。
    – cubick
    Commented 2018年11月29日 12:46
  • cubick様、ご多忙の中ご教示頂きまして感謝いたします。ご指摘の通りです。そして上記の様に試しましたが値を取得できないようです。 Commented 2018年11月29日 13:02

2 件の回答 2

2

URLのクエリパラメータを取得する簡単な方法は、URLオブジェクトを使用することです。URLコンストラクタに現在のURL(location.href)を渡すことでURLオブジェクトを作成し、そのsearchParamsから目的のクエリパラメータを取得します。

// 現在のURLを表すURLオブジェクトを作成
var url = new URL(location.href);

// searchParamsから目的のクエリパラメータを取得(今回はid)
var id = url.searchParams.get("id");

こうすることで、例えばURLがhttp://www.xxxx.com?id=256の場合はid変数に"256"が入っています。(もしidというクエリパラメータが存在しない場合はnullが入りますので、適宜処理が必要です。)

あとはこれを適当な方法でinputのvalueに代入しましょう。例えば以下のようにします。

document.getElementById('id').value = id;

注意点ですが、URLオブジェクトは比較的新しい機能のため、古いブラウザ(Internet Explorerや、iOS 9以下のSafari等)では動作しません。もしこれらに対応する必要がある場合はcubickさんのもう1つの回答のように、location.searchに入っている"?id=123"のような文字列から目的の部分を抜き出す必要があります。

追記

全てのブラウザに対応しなければいけない場合は、特にIEのような古いブラウザではURLの機能が提供されていないため、上記の回答の方法をそのまま使うことはできません。対応方法を2つご紹介します。

  1. Polyfillを使う。
    Polyfillとは、古いブラウザに存在しない機能を補ってくれるスクリプトです。URLに対応したPolyfillを読み込んで使うことで、古いブラウザでも上記のスクリプトが動くようになります。
    Polyfillは様々なものが存在しますが、例えばpolyfill.ioが提供するPolyfillを読み込んで使う場合は、ページのhead要素内に以下のscript要素を追加します。

    <script src="https://cdn.polyfill.io/v2/polyfill.js?features=URL"></script>
    

    これはよその人が書いたスクリプトを読み込んで利用することになりますが、それが問題ないのであれば簡単な方法ですのでお勧めします。Polyfillに関する詳しいことは上記polyfill.ioなどをご参照ください。一応付記しておくと、上記のPolyfillはCC0で提供されているため、ライセンス表記無しで利用することができます。
    また、古いブラウザで動作させるために、上記のスクリプトを少しだけ変更しています。具体的には、2箇所のconstvarに書き直しました。この変更を適用し、上記のscript要素の追加を行うことで、古いブラウザでも動作するようになるかと思います。

  2. URLの使用を諦めてlocation.searchを使用する。
    上記1の方法をとることができない場合は、上記の方法は諦める必要があります。この方法は1に比べてお勧めできませんが、それでもやりたい場合は上記のコードの代わりに例えば以下のようにするとよいかと思います。

    // クエリパラメータ部分を取得
    var search = location.search;
    // 最初の"?"を取り除く
    search = search.replace(/^\?/, '');
    // "&"でクエリパラメータを分割
    var params = search.split('&');
    // パラメータの中から"id=数字"の形のものを探す
    for (var i=0; i<params.length; i++){
        if (/^id=\d+$/.test(params[i])) {
            // 目的の形のものが見つかったら数字部分をid変数に入れる
            id = params[i].slice(3);
        }
    }
    // 以下は同様
    document.addEventListener('DOMContentLoaded', function() {
        document.getElementById('id').value = id;
    });
    
9
  • Faily Feely様、ご教授頂きまして感謝いたします。ご教授を基に試した記述を上段にて変更致しました。value=""の様に空欄に致しました。しかしながら、値を取得していない様でございます。記述のどこに問題があるかご教示頂けませんでしょうか。 Commented 2018年11月29日 9:41
  • @baseballjapan 前回のご質問と同様の問題が発生しているかと思います。inputのvalueに代入する部分は、HTML上ですでに当該のinput要素が読み込まれている必要があります。 前回と同様の対処をすれば動作するのではないかと思います。 Commented 2018年11月29日 10:17
  • Feely様、ご多忙の中恐縮でございます。追記2を追加いたしました。何かお分かりになりますでしょうか。 Commented 2018年11月29日 12:40
  • こちらでは追記2のものの動作を確認できましたので、環境に起因する問題かと思います。お使いのブラウザをご教示いただけるでしょうか。 また、PCのブラウザでは当該ページで「F12」キーを押すと開発者ツールが表示されます。その中から「コンソール」(Console)を探していただくと、そこに何らかのエラーメッセージが表示されている可能性があります。その内容を教えていただければ手がかりとなるかもしれません。 Commented 2018年11月29日 13:30
  • 1
    Faily Feely様、 1のPolyfillを利用することにより、私の環境下にある約10のブラウザー、およびその異なるバージョンでjsがurlからパラメータを取得できているようでございます。ただyutubeも機能しないieの古いバージョンではurlパラメータ取得は分かりませんが、自動ログインのJSが機能しなかったので、その様な使用不可のブラウザー、バージョンを何らかのテストサイトで調べて(時間的にどれ位かかるか予想もつきませんが)、最初から使用できないようにしようと考えております。(想定としての対象ユーザーは古いブラウザーを使用している可能もかなり高いです)しかしながら、私の途方もない質問に対して愚直にご対応頂きまして感謝の限りでございます。ありがとうございます。 Commented 2018年11月30日 4:31
1

JavaScriptのLocationオブジェクトを利用すれば、URLやパラメータを取得できるようです。

var url   = location.href;   // URL全体
var searh = location.search; // "?"以降のパラメータ文字列(?も含む)

参考:
JavaScriptで現在のURLやパラメタを取得する方法 (Location)

1
  • cubick様、 この度は貴重なご意見、ご教示を頂きまして感謝いたします。いろいろ試している中で大変参考になりました。 Commented 2018年11月30日 4:32

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。