JavaScript

クエリーストリングを利用してWebページ間でデータを受け渡してみる

QueryString

「クエリーストリング」っていうのは以下のようなGoogleで検索した時に表示されるものをいいます。

1
https://www.google.co.jp/search?aq=f&sugexp=chrome,hogehoge...

「?」ではじまり「&」で区切って「キー=値」を並べたものです。
上の例ではこんな感じですね。
なにやら混乱しそうですが。。。

1
2
3
4
? //キーと値スタート
aq=f
&//区切り
sugexp=chrome

これを取り出すには例えば以下のようにします。

1
2
3
4
5
6
7
8
9
var query1 = window.location.search;
var qstr = query1.substr(1).split('&');
for(var i=0; i < qstr.length; i++){
    var qstr2 = qstr[i].split('=');
    if(qstr2[0] == 'aq'){
        data1 = qstr2[1];
        break;
        }
    }

これで「data1」に「f」が入りますね。
けっこう簡単にWebページ間でデータのやりとりってできるんですね〜。
この先なにか使うかも♪

でもいまのところ使う予定はないなあ^^;

▼基本がわかりやすかったです。

関連記事

  1. JavaScript

    「TweenMax.js」をビジネス利用のためのライセンス購入方法

    いつもJavaScriptのアニメーション部分でお世話になってる「…

  2. JavaScript

    JavaScriptでグローバル変数の使いどころを見直してパフォーマンスを改善する

    JavaScriptのコードの中では、どこにデータを格納するかでコ…

  3. JavaScript

    【TweenMax.js】回転アニメーションも楽々!

    以前も記事に書いたアニメーション用のJavaScriptライブラリ…

  4. JavaScript

    WebアプリでCanvasを使うための指定方法

    Webアプリをデザインするときのお決まりになりつつあるHTML5の…

  5. JavaScript

    CSSのプロパティをJavaScriptで指定する

    Elementオブジェクトのstyleプロパティでその要素に対し…

  6. JavaScript

    Android端末のデフォルト・ブラウザでJavaScriptのデバッグをする方法

    Webアプリをデザインするときに必須となるのがJavaScript…

最近の記事

  1. ホワイトハウスコックスの財布
  2. 進撃の巨人展FINAL チラシ
  3. 【無印良品】ゴールデンウィーク中のご飯にレトルト買い込み!
  4. 世代ど真ん中だった!!『週刊少年ジャンプ展 vol2』
  5. デジタル通貨を買ってみた記録!とりあえず元は取っている!
  6. 【コレクション】カードダス:SDガンダム外伝シリーズ
  7. 懐かしい!!カードダスSD戦国伝!!

アーカイブ

  1. 日常

    『デザイン基礎講座レイアウト&タイポグラフィ』
  2. annular_eclipse

    日常

    金環日食と金環日食デザイン・プロダクト
  3. しんかい6500シンポジウム

    イベント

    有人潜水船「しんかい6500」就航20周年記念シンポジウム
  4. 日常

    「さよなら ナム・ジュン・パイク展」
  5. WordPressの基本的な設定項目をおさらい4「ディスカッション設定」篇

    WordPress

    WordPressの基本的な設定項目をおさらい4「ディスカッション設定」篇
PAGE TOP