I am trying to set up a simple webpage. I have header, content, and footer div's, like so:
<body>
<div id="headerDiv"></div>
<div id="contentDiv"></div>
<div id="footerDiv"></div>
</body>
The header & footer are loaded once, and then then content div will be loaded with content based on mouse clicks in the header:
<script>
$(() => {
$("#headerDiv").load("components/header.html");
$("#footerDiv").load("components/footer.html");
loadContent(window.location.hash.substring(1));
});
loadContent = (page, args) => {
window.location.hash = '#' + page;
switch (page) {
case 'home':
$("#contentDiv").load("components/home.html");
break;
case 'page1':
const { argument } = args || '';
$("#contentDiv").load("components/page1.html?param=" + argument);
break;
case 'page2':
$("#contentDiv").load("components/page2.html");
break;
case 'page3':
$("#contentDiv").load("components/page4.html");
break;
default:
$("#contentDiv").load("components/home.html");
}
}
</script>
The above code snippets are in my index.html. As you can see, I'm trying to pass an argument to page1.html, but it isn't working. If I do console.log(window.location.href) from page1.html remains "index.html"; no argument ever gets processed when I load page1.html. How can I get the argument passed to page1.html? Do I have to load a PHP or some other script rather than raw HTML?
EDIT: loadContent is called from header.html like this:
<a href="#page1" onclick="loadContent('page1', {argument: 'airport'})">
The idea is that the second parameter is an arbitrary JS object.
TIA!
question from:
https://stackoverflow.com/questions/65851188/passing-arguments-to-jquery-load 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
