JavascriptでURLの変更を検知したいなら、DOMの変化を検知しろ。

毎日投稿56日目

今日はJavascriptについて書いていきます。

ふと、URLの変更を検知したいなと思ったこと一度はありませんか？

このURLの時はこの処理を加えたいとか、入力画面ではページ移動するときに警告を表示したいとか誰しもが一度は思うこと。

そこで、今回はタイトルにも書いてある通りDOMの変化を検知します。

URLの変更を検知するのって結構めんどい。。。

また、大体はURLの変更を検知して、結局変更を加えるのって要素ですよね。

なら最初っからDOMで全部行ってしまいましょう！

それでは説明を一緒に見ていきましょう！

#MutationObserverの宣言#

皆さんMutationObserverと言う名のメソッドは聞いたことはあるでしょうか？

おそらくこの記事を見に来ている方は、ほとんどが知らないと思います。

実際僕も初耳でした。

これは指定したDOMの変更を検知するというものです。

これを使ってDOMの変更を検知します。

index.js

const observer = new MutationObserver(function () {
  // 処理
})
observer.observe(document, { childList: true, subtree: true })

observe()の第一引数に変更を検知したい要素を指定し、第二引数には指定されたプロパティを入れます。

一応説明しておくと、childListは「対象ノードの子ノード（テキストノードも含む）に対する追加・削除を監視」、subtreeは「対象ノードとその子孫ノードに対する変更を監視する場合」となっています。

って言っても説明はドキュメントからコピペしただけなので、下記のドキュメントを見て頂いた分かりやすいかと。

https://developer.mozilla.org/ja/docs/Web/API/MutationObserver

#使用例#

以下に使用例を載せておきます。

特定のページだけページを移動しようとすると警告を表示するようにしています。

index.js

let nowOnbeforeload = null
const observer = new MutationObserver(function () {
  // 既にイベントを追加していたら処理を行わない
  if (nowOnbeforeload) {
    return
  }
  // 警告を表示する要素を取得
  const element = document.getElementsByClassName('onbeforeload')[0]
  if (element) {
    // 要素があればイベントを追加
    window.onbeforeunload = function (event) {
      if (event.target.activeElement.id === 'remove-beforeunload') {
        // クリックした要素がイベントを忠告しない要素だったら終了
        return
      }
      event.preventDefault()
      event.returnValue = ''
    }
    nowOnbeforeload = element
  } else {
    return
  }
})

このようにしてURLの変更（DOMの変更）を検知することで、自由自在にフロント部分を操れます。

めちゃ便利なのでぜひ使ってください！

以上、「JavascriptでURLの変更を検知したいなら、DOMの変化を検知しろ。」でした！

良ければ、LGTM、コメントお願いします。

また、何か間違っていることがあればご指摘頂けると幸いです。

他にも毎日初心者さん向けに記事を投稿しているので、時間があれば他の記事も見て下さい！！

Thank you for reading