More than 5 years have passed since last update.

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

JavaScript

Last updated at 2018-12-27Posted at 2018-12-26

#やりたいこと

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>

Output >>>　の部分にinputタグで入力した値を出力できたらOK

##JavaScript実装

###input.js

input.htmlで読み込む用のinput.jsを作成。

やることは、

buttonのクリックイベントで
inputの値を取得して
値を渡して画面遷移

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

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up