編集

htmz

#htmz #HTML

htmz は標準の HTML を利用してページの部分更新を行う数行のスニペットです。

html
<script>
  function htmz(frame) {
    setTimeout(() =>
      document
        .querySelector(frame.contentWindow.location.hash || null)
        ?.replaceWith(...frame.contentDocument.body.children)
    );
  }
</script>
<iframe hidden name="htmz" onload="window.htmz(this)"></iframe>

http://leanrada.com/htmz/

実用的かはともかく、かなり面白いアイデアだと思います。リンクをクリックされると、iframe に対応したコンテンツが描画され、そのコンテンツを hash の id が付いた要素の中身と置換する仕組みになっています。

html
<base target="htmz" />

<div role="tablist">
  <a class="tab" href="dog.html#my-tab-panel">Dog</a>
  <a class="tab" href="cat.html#my-tab-panel">Cat</a>
  <a class="tab" href="horse.html#my-tab-panel">Horse</a>
</div>

<div id="my-tab-panel" role="tabpanel"></div>
<iframe hidden name="htmz" onload="window.htmz(this)"></iframe>
編集