More than 5 years have passed since last update.

JavaScriptでハッシュの変更に応じて外部jsファイルを動的に読み込む

JavaScript

Posted at 2017-07-30

ハッシュが変わると、そのハッシュ名のjsファイルを読み込む。
サーバ側を作りたくなくて、最初にすべてのjsファイルを読み込みたくない場合に利用できるはず。

<!DOCTYPE html>
<html>
<head></head>
<body>
<a href="#test">test</a>
<script>
window.addEventListener('hashchange', () => {
  const hash = window.location.hash,
        src = "./" + hash.slice(1) + ".js";
  loadScript(src);
});

function loadScript(src) {
  const script = document.createElement('script');
  script.onload = () => {
    console.log(`"${src}" has loaded.`);
  };
  script.src = src;
  document.body.appendChild(script);
}
</script>
</body>
</html>

test.js

console.log('"./test.js" is being loaded.');

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up