說明如何藉由 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;
}
}