JavaScriptで画面遷移してハッシュ値を取得する方法
JavaScriptで画面遷移してハッシュ値を取得する方法:
aタグを使用せずに、クリックした際に特定の値をひもづけた状態で画面遷移し、その値を取得したい。
以下の方法で、画面遷移、値の受け渡しが実現可能。
ボタンをクリックした際に、
それぞれのファイルはこんな感じ
*aタグを使用せずにclickイベントで画面遷移させたいのでbuttonタグを用意
Output >>> の部分にinputタグで入力した値を出力できたらOK
input.htmlで読み込む用のinput.jsを作成。
やることは、
1. buttonのクリックイベントで
2. inputの値を取得して
3. 値を渡して画面遷移
今回の肝でもある画面遷移は、
とすれば実現できる。
MDNのドキュメントによると、
今回はハッシュ値を利用することで値の受け渡しを行いたいので、遷移先のパスに
output.htmlで読み込むようのoutput.jsを作成。
やることは
1.ハッシュ値を取得
2.デコードして、
3.spanタグに表示
urlに付随するハッシュ値は、
urlのハッシュ値では、空白や日本語などはエンコードされるので、値を取得したら表示する前にデコードする。
デコードは、
で実現可能。
これで完成。
inputタグに値を入力しボタンを押すと、画面遷移して入力内容が出力される。
urlを操作したいなら
やりたいこと
aタグを使用せずに、クリックした際に特定の値をひもづけた状態で画面遷移し、その値を取得したい。
結論
以下の方法で、画面遷移、値の受け渡しが実現可能。
1. 値をひもづけて画面遷移
const input = 'sample value'
location.assign(`/output.html#${input}`)
2. 値の取得
const output = decodeURI(location.hash.substring(1))
やったこと
ボタンをクリックした際に、input.htmlからoutput.htmlへ画面遷移し、input.html内のinputタグに入力した値を遷移先のoutput.htmlで表示する。
htmlを用意
それぞれのファイルはこんな感じinput.html
<body>
<h1>input.html</h1>
<input type=text id="input">
<button id="link">to output page</button>
<script src="input.js"></script>
</body>
output.html
<body>
<h1>output.html</h1>
<h2>Output >>> <span id="output"></span></h2>
<script src="output.js"></script>
</body>
Output >>> の部分にinputタグで入力した値を出力できたらOK
JavaScript実装
input.js
input.htmlで読み込む用のinput.jsを作成。やることは、
1. buttonのクリックイベントで
2. inputの値を取得して
3. 値を渡して画面遷移
input.js
document.querySelector('#link').addEventListener('click', (e) => { // 1. buttonのクリックイベントで
const input = document.querySelector('#input').value //2. inputの値を取得して
location.assign(`/output.html#${input}`) //3. 値を渡して画面遷移
})
画面遷移
今回の肝でもある画面遷移は、location.assign(/* 遷移先 */)
MDNのドキュメントによると、
Location インターフェイスは、関連付けられたオブジェクトの場所 (URL) を表します。 Location に対して変更が行われると、関連するオブジェクトに反映されます。 Document インターフェイスおよび Window インターフェイスにはこのような関連付けられた Location があり、それぞれ Document.location および Window.location でアクセスできます。とのことで、urlに関連した操作が可能。
値の受け渡し
今回はハッシュ値を利用することで値の受け渡しを行いたいので、遷移先のパスに#受け渡す値を付け足す。下の場合、変数inputの値を受け渡している。location.assign(`/output.html#${input}`)
output.js
output.htmlで読み込むようのoutput.jsを作成。やることは
1.ハッシュ値を取得
2.デコードして、
3.spanタグに表示
output.js
const hashValue = location.hash.substring(1) //1.ハッシュ値を取得
const output = decodeURI(hashValue) //2.デコードして、
document.querySelector('#output').textContent = output //3.spanタグに表示
ハッシュ値の取得
urlに付随するハッシュ値は、location.hashで取得することができる。しかし、location.hashの値は#も含まれてしまうので#を取り除く必要がある。subtring(1)で先頭を取り除いた状態でハッシュ値を取得する// 「http://127.0.0.1:8080/output.html#hash-value」 の時、 console.log(location.hash) // #hash-value console.log(location.hash.substring(1)) // hash-value
デコード
urlのハッシュ値では、空白や日本語などはエンコードされるので、値を取得したら表示する前にデコードする。// 「http://127.0.0.1:8080/output.html#こんにち」 の時 const hashValue = location.hash.substring(1) console.log(hashValue) //%E3%81%93%E3%82%93%E3%81%AB%E3%81%A1%E3%81%AF console.log(decodeURI(hashValue)) //こんにちは
decodeURI(encodedURI)
完成
これで完成。inputタグに値を入力しボタンを押すと、画面遷移して入力内容が出力される。
まとめ
urlを操作したいならlocationインターフェイスを使えばOK
コメント
コメントを投稿