3 ms·
> The main reason for client-side rendering is that some web applications don't want to do a full page reload every time that there's a non-trivial state change
by 6510 5y ago
> The main reason for client-side rendering is that some web applications don't want to do a full page reload every time that there's a non-trivial state change (usually triggered by user interaction).
If that is the reason (I don't know) some element other than <iframe> would be a much simpler solution.
I had a few ideas just now. It seemed the most fascinating to tie part of the query string to a div.
<humpalumpa cowabunga="foo" dartvader="foobariusmaximus"/>
Then you have your usual <div id="foobariusmaximus"></div>
And your url example.com/?foo=demo.html
And from thereon <a href="?foo=second-demo.html"> shall only update that part of the url and that part of the document.
If demo.html contains a <doctype><head><script> or <style> it is ignored if the target is a div.
But something like <a href="?mycss=banana.css&myjavascript=kiwi.js"> with appropriate targets seems fine(?)
Alternatively the querystring tie can be defined on the element.
<div id="foobariusmaximus" cowabunga="foo"></div>
Older browsers when hitting <a href="?foo=second-demo.html"> will load example.com/?foo=second-demo.html
- tored 5y agoBasically what turbolinks did.
- 6510 5y agoOr what 99% of ajax did. What I really want to see is for html to work toward what people are actually doing with web pages. I basically want a lawnmower not a bag of parts that allows me to build my own. I know how to sort tables but I don't want to. I know how to dynamically xhr, display and insert auto complete values but I don't want to write it and I don't want the chunk of js on the page. I definitely don't want to load a library for it.
- tored 5y agoOld <frameset> pages had its charm. You can still use it with HTML5! If I remember correctly was that screen readers sometimes had some difficulty handling a <frameset> page, especially if the were multiple <frame>s. <iframe> is also great, but hard to layout horizontally. And resizing can be tricky. And nowadays you don't even need your own event layer to talk between frames, you can use postMessage. But yes, agree, continue evolve <iframe> and such to become more usable.
- 6510 5y agoOne can use postMessage but if everything lives on the same domain one can top.frames["left"] in stead of window and call functions or manipulate the dom. You had me play with framesets for a bit. document.write((function(){switch(window.name){ case "main": switch(location.search){ case "?foo": return `<base target="top"></head><body>Article text`; default: return `no article selected`; } case "menu": switch(location.search){ case "?bar": return `<base target="main"></head><body>List of <a></a>'s`; case "?youtube": return `<base target="main"></head><body><list of youtube.com/embed/ links`; default: return `please make your selection on the left`; } case "left": return `<base target="menu"></head><body> list of <a href="?youtube"> links`; default: return ` <frameset cols="15%,85%"> <frame name="left" src="index.html" /> <frameset rows="30%,70%"> <frame name="menu" src="index.html" /> <frame name="main" src="index.html" /> </frameset> </frameset>`; }})()); I laughed so hard writing that.
- chrisweekly 5y agoThis mapping of URL segments to areas of a page is precisely what Remix (and React Router v6) achieve with "nested routes". I used to denigrate React router's "routes as components" approach, but completely changed my mind with tbe advent the of nested routes as implemented by Remix; it's profoundly powerful, intuitive, performant, etc.