JavaScript OnHashChange / Get Hash tag value


  1. 說明
  2. 參考資料

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

JavaScript logo

說明

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