JavaScript OnHashChange / Get Hash tag value

2022-02-15

說明如何藉由 Vanilla JS 偵測 URL Hash 變化進行頁面渲染 (iframe load)，從而實現迷你版本的 Hash Tag Router 路由機制 😎

說明

function updateIframe() {
    link = 'https://sdwh.dev/hash/' + window.location.hash.replace('#', '') + '.html'
    document.getElementById('iframeID').src = link;
}

$(document).ready(function(){
    window.onhashchange  = updateIframe

    updateIframe()
})

可以更進一步的屏除使用 jQuery 改採 IE9⁺ 瀏覽器所支援的 Vanilla JS 語法：

function ready(fn) {
  if (document.readyState != 'loading'){
    updateIframe();
  } else {
    // document.addEventListener('DOMContentLoaded', fn);
    window.onhashchange  = updateIframe;
  }
}

參考資料

You might not need jQuery