URL変更イベントの実装。
$ npm i url-change
import 'url-change';
// or dynamic-import, CDN
await import('https://cdn.jsdelivr.net/gh/honeo/url-change/index.min.mjs');
window.addEventListener('urlchange', (e)=>{
console.log(
e.type, // "urlchange"
e.oldURL, // "https://example.com/query?foo=bar"
e.newURL // "https://example.com/queryandhash?hoge=fuga#piyo"
);
});
// only WebPageContext
window.onurlchange = function(e){...}
// or hash|href|password|pathname|search|username
window.addEventListener('urlchange-hash', (e)=>{
console.log(
e.type, // "urlchange-hash"
e.oldURL, // "#foo"
e.newURL // "#bar"
);
});
window.onurlchangehash = function(e){...}
- history.pushState|replaceState()の実行時
- 標準のhashchangeイベント発火時
ブラウザ拡張機能(ChromeExtensions, WebExtensions)のContentScriptsでも動作する。
ContentScriptsから利用時、渡されるEventインスタンス名がHashChangeEventになる。 (Isolated worldによってContentScriptsからWebページ上の独自クラスを参照できないため)