All Posts
News bits
htmz
htmz
htmz は標準の 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>実用的かはともかく、かなり面白いアイデアだと思います。リンクをクリックされると、iframe に対応したコンテンツが描画され、そのコンテンツを hash の id が付いた要素の中身と置換する仕組みになっています。
<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>著者について
Hi there. I'm hrdtbs, a frontend expert and technical consultant. I started my career in the creative industry over 13 years ago, learning on the job as a 3DCG modeler and game engineer in the indie scene.
In 2015 I began working as a freelance web designer and engineer. I handled everything from design and development to operation and advertising, delivering comprehensive solutions for various clients.
In 2016 I joined Wemotion as CTO, where I built the engineering team from the ground up and led the development of core web and mobile applications for three years.
In 2019 I joined matsuri technologies as a Frontend Expert, and in 2020 I also began serving as a technical manager supporting streamers and content creators.
I'm so grateful to be working in this field, doing something that brings me so much joy. Thanks for stopping by.