Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

JavaScriptで画面遷移してハッシュ値を取得する方法

More than 1 year has passed since last update.

やりたいこと

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>

*aタグを使用せずにclickイベントで画面遷移させたいのでbuttonタグを用意

output.html
<body>
    <h1>output.html</h1>
    <h2>Output >>> <span id="output"></span></h2>

    <script src="output.js"></script>
</body>

image.png

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タグに値を入力しボタンを押すと、画面遷移して入力内容が出力される。

image.png

まとめ

urlを操作したいならlocationインターフェイスを使えばOK

nbstsh
JavaScript勉強中
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away