1

I can't 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 loaded but JS functions are not loaded in the page, why?

I have main-window.js as:

webPreferences: {
  preload: path.join(__dirname, 'preload.js'),
  contextIsolation: true,
  nodeIntegration: false,
  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 loads:

enter image description here

Even I call the loadScript file the page, js functions are not executing ? The file choice.html works, but choice.js function have some HTML content load and it not executing.

Improve this question
2
  • "JS functions are not loaded", what does it mean? What happens? Have you looked for errors in the dev tools console?
    – Arkellys
    Commented Jun 10 at 8:41
  • Yes no errors shows in console , i can access the functions from console but document.addEventListener('DOMContentLoaded', () => { function }); this doesn't work
    – Sasanka Weerakoon
    Commented Jun 10 at 8:46

1 Answer 1

Reset to default
1

if you using this in separate js file to execute the function it wont work

document.addEventListener('DOMContentLoaded', () => {
    // your function 
});

since you replacing your content your file doesn't reload so function wont be executing and also adding as another script after main script can lead several issue later in larger productions.

try using wrap your function executable function

(function hello() {
})();
Improve this answer
0

Not the answer you're looking for? Browse other questions tagged or ask your own question.