【JavaScript】データURIスキームにクエリ文字列を追加＆取得する方法
はじめに
データURIスキームにクエリ文字列を追加＆取得する方法をまとめました。｢通常のURL(https://***/?～)｣と同様に｢データURIスキーム(data:text/html;)｣にも、｢クエリ文字列(URLパラメータ)｣を追加したり、クエリ文字列をJavaScriptで取得したりできます。
《 データURIスキームとは？ 》
data:～から始まる“URLのようなもの”で、｢文字｣｢画像｣｢サイト｣など色々なものをブラウザに表示させることができる。
［文字］data:text/plain;～
［画像］data:image/jpeg;～
［サイト］data:text/html;～
《 もくじ 》
■ サンプルURL
■ サンプルソースコード(データURIスキーム)
■ サンプルソースコードの解説
■ サンプルURL
data:text/html;charset=utf-8,<!DOCTYPE%20html><html%20lang="ja"><head><meta%20charset="utf-8"><title>サンプルソースコード</title>%3Cscript%3Ewindow.onload=function(){let%20query=window.location.search;query=query.split("?")[2];document.getElementById("query").innerHTML=query;console.log(query);};%3C/script%3E</head><body><div%20id="query"></div><p%20style="display:none;">?query=example上記のデータURIスキームにアクセスすると、クエリ文字列の『query=example』が表示される。
■ サンプルソースコード(データURIスキーム)
data:text/html;charset=utf-8,
<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8">
<title>サンプルソースコード</title>
<script>
window.onload=function(){
let query=window.location.search;
query=query.split("?")[2];
document.getElementById("query").innerHTML=query;
console.log(query);
};
</script>
</head><body>
<div id="query"></div>
<p style="display:none;">?query=example※ 最後の『?query=example』がクエリ文字列。
※ HTMLの部分は｢validator.w3.org｣で問題ないか確認ずみ。
※ </p>は省略。
※ </body>は省略。
※ </html>は省略。
《 参考サイト 》
・ HTML5 で省略できるタグ - Qiita
https://qiita.com/labocho/items/54fd70c73ced35c8ba49
■ サンプルソースコードの解説
① ｢データスキーム(data:text/html)｣の最後にクエリ文字列(?query=example)を記述。
② JavaScriptの｢window.location.search｣でクエリ文字列を取得。
③ JavaScriptの｢document.getElementById("")｣や｢console.log()｣などでクエリ文字列を表示。
■【関連情報】JavaScript関連記事
このnoteには、他にも｢JavaScript関連記事｣があります。
【JavaScript】TinyURLでiPhoneのブクマを共有
https://note.com/text_sakura/n/naf5404d50a3f
【JavaScript】｢西暦｣を｢和暦｣に変換＆表示(例:1976年→昭和51年)
https://note.com/text_sakura/n/n4629971e7ba7
【JavaScript】文字を置換して暗号を作成(例:hello⇔khddb)
https://note.com/text_sakura/n/n727601f0ef83
【JavaScript】｢フォーム入力文字｣を｢URLの#以降(hash)｣に表示
https://note.com/text_sakura/n/nfc4b5bda1dcc
【JavaScript】｢閏年(うるう年)｣か判定
https://note.com/text_sakura/n/n7c7815b13150
（text）
◇ ◇ ◇
《 過去に作成したnoteの記事リスト 》
https://note.com/text_sakura/n/na2cd73291236
《 記事についてのお問い合わせ先 》
text.sakura.note@gmail.com
※ 添付ファイルが含まれるメールは受け取ることができません。
※ テキストのみでお願いいたします。
この記事が気に入ったらサポートをしてみませんか？