Skip to content

htmz - A Low Power Tool for HTML

Updated: at 10:42 AM

Nice little experiment, definitely not production-ready (as you might want to add some security features and loading handlers, for instance) to demonstrate an easy and clever way of loading external requests into your HTML page without the need for JQuery or other extensive libraries.

Just add:

<iframe hidden name=htmz onload="setTimeout(()=>document.querySelector(contentWindow.location.hash||null)?.replaceWith(...contentDocument.body.childNodes))"></iframe>

And you can easily recreate a famous AJAX form:

<!-- Sends form data to /greeting, putting the response onto #result -->
<form action="_/greeting_#result" target=htmz>
  <label>
    What's your name?
    <input name="name">
</label>
<button>Greet me</button>
</form>

<!-- This will be replaced by /greeting's response -->
<div id="result"></div>

PHP example backend /greeting:

<p id="result">Hello, <?= $_REQUEST['name'] ?></p>

Who would have thought that the iframe tag would make a comeback in 2024?

via