Im New to electron , my scenario I cant use electron forge, so in order avoid duplicating header in html files, I want the base of the content load using Js function , within the page also I need to do the execution as well
HTML Content is load but JS functions are not load in the page, why ?
I have main-window as,
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
contextIsolation: true,
nodeIntegration: true,
backgroundThrottling: false
}
In my renderer,js
function loadAndRenderPage(page) {
fetch(`pages/content/${page}.html`)
.then(response => response.text())
.then(data => {
document.getElementById('content').innerHTML = data;
switch (page) {
case 'home':
document.getElementById('org-name').innerText = resourcePath.ORG_NAME || 'Aiken';
// console.log(window.resourcePath.ORG_NAME);
break;
case 'choice':
loadScript('choice');
break;
case 'pin_entry':
// pinEntry();
break;
default:
break;
}
});
}
function loadScript(page) {
fetch(`js/${page}.js`)
.then(response => response.text())
.then(data => {
const scriptElement = document.createElement('script');
scriptElement.text = data;
document.head.appendChild(scriptElement);
});
}
In index.html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
<title>Title</title>
<link rel="stylesheet" href="index.css">
<!-- Bootstrap CSS -->
<link href="../../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<header id="header"></header>
<main id="content"></main>
<footer id="footer"></footer>
<script src="renderer.js"></script>
</body>
</html>
In the Network tab I can see the js file load
Even I call the loadScript file the page, js functions are not executing ?