📡

ハッシュの変更でイベント発火 'hashchange'

2023/03/08に公開

hashchangeとは

https://index.html#a → https://index.html#b のようなhashの変更を検知してfunctionを発火させることができるものです。

window.addEventListener('hashchange', function() {
  console.log('The hash has changed!')
}, false);

iframeなどを使った開発で親のwindowに情報を送る(postmessageなど)際に、cross-originのerrorが発生する場合があると思うのですが、解決策として使うことができました。

ハッシュの後にbtoaなどを利用して、エンコードしたデータをhashとしてiframeのsrcにし、使うときにatobを利用しつつデコードして使用することを想定しています。

例えば、

function　BtoA () {
  Iframe.src = Iframe.src + "#" + window.btoa("data");
}

みたいな感じでiframeのsrcを変更し
ハッシュの変更が起きた際に

window.addEventListener('hashchange', function() {
  Data = JSON.parse(window.atob(window.location.hash.substr(1)));
});

これでハッシュに載せてdataを送ることができるし、cross-originのerrorが出ないようになります。

これは正攻法なのかわからないのですが、解決できたという事例があったので、ご紹介でした。