I am having an issue when hosting an HTML file generated via ElderJS on a server. At the bottom of the HTML file exists a that adds a 'load' event listener to the page. The callback function for the event listener should import a piece of javascript from a directory adjacent to where the HTML is hosted and append it to the head. The javascript is responsible for all the fuctionality of the page so it is definitely needed.
When opening the HTML locally in browser everything seems to work fine however when I open the HTML that is being hosted online this javascript is never imported.
Here is some example HTML of what the file looks like:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div id="headerTwMZGyMlgV">
<h1>Some test HTML</h1>
</div>
<script type="module">
function initheaderTwMZGyMlgV(){
console.log('init header');
import("../_elderjs/svelte/components/websiteName/Header.38249def.js").then((component)=>{
new component.default({
target: document.getElementById('headerTwMZGyMlgV'),
props: {},
hydrate: true
});
});
}
window.addEventListener('load', function (event) {
console.log("load");
var observerTwMZGyMlgV = new IntersectionObserver(function(entries, observer) {
var objK = Object.keys(entries);
var objKl = objK.length;
var objKi = 0;
for (; objKi < objKl; objKi++) {
var entry = entries[objK[objKi]];
if (entry.isIntersecting) {
observer.unobserve(document.getElementById('headerTwMZGyMlgV'));
if (document.eg_pwheader) {
initheaderTwMZGyMlgV();
} else {
document.eg_pwheader = true;
initheaderTwMZGyMlgV();
}
}
}
}, {
rootMargin: '200px',
threshold: 0
});
observerTwMZGyMlgV.observe(document.getElementById('headerTwMZGyMlgV'));
});
</script>
</body>
</html>
What seems to be the major difference between running the HTML locally versus online is that the 'load' eventListener is not triggering. Locally the 'load' console log is displaying however online it is not. Any help is much appreciated!