0
Hello I was trying something for study purposes only. I wonder if there’s a way to do that:
make a single page application, without using any external framework, only html, js and css.
what I’m trying to be:
- Create a fake html tag
<include src='componentes/menu.html'> - Using the tag to inject other files, as if they were components, kind of mimicking the React or angular.
- When loading the main html, a js inspects the DOM and collects the
<includes> - Load and inject the referenced files into the property
src.
I did using xmlHttpRequest to load the files, such as:
Array.from(includes)
.forEach(function (include_) {
let url = include_.attributes.item(0).value;
if (url.indexOf("./") !== 0) {
url = './' + url;
}
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload=(resq) => {
const html = new DOMParser().parseFromString(xmlhttp.responseText, "text/html");
const h = html.documentElement
h.id = 'patos'
include_.insertAdjacentElement('afterend', h);
const a = document.createElement('div');
const patos = document.getElementById('patos')
Array.from(document.getElementsByTagName('script')).forEach(element =>{
patos.appendChild(element)
})
}
xmlhttp.open("GET",url ,true);
xmlhttp.send();
});
The tags <link> with the css are loaded normally, the problem is the tags <script>, They are not loaded.
Is it possible to do something like this? There is a more appropriate way?
welcome Henry, translate the title of your question pf
– Ricardo Pontual
yes it is possible, but from what I understand you want to do this without tbm frameworks, with pure javascript? it is possible, pq at the end any javascript framework is done using the basics of javascript, but will have to write the logic of routes at hand, and for those who do not know much about it
– Ricardo Pontual
So my goal is not to use these frameworks as angular or React. But I wanted to understand how this is done, and before I look at code, I try to imagine shapes and implement, I think it’s easier to assimilate the content later, whether it’s looking at the doc or the code. But at the moment I’m at this impasse.
– Henrique Dias Campos
since you want to redo what these frameworks already do, I suggest you look at their source code, this will help you understand what you need to do
– Ricardo Pontual