ELECTRON - Load local HTML file containing a script tag

Question

I'm relatively new to Node and Electron so I could be way off on this.

Essentially what I'm trying to do is create a SPA that has a main navigation and the user can click on the links which will load local HTML files that contain a script tag. Currently I have a main page that uses fs to grab the html files and load it into a div successfully but none of the JS in that retrieved file works. I'm doing it this way because I need to interact with the UI and add dynamic elements

this is what I have for code:

mainWindow.html

<script>
    document.addEventListener('DOMContentLoaded', () => {
        fs.readFile(path.join(__dirname, 'fragments/main/welcome.html'), 'utf8', (err, data) => {
            document.getElementById('content').innerHTML = data;
        });
    });
</script>

welcome.html

<section class="main-content-wide">
<h1>Welcome to my app</h1>
<p id="datetimeGreeting"></p>
<p id="funFact"></p>
<script>
    console.log('Hello world');
</script>

Thanks in advance.

edit: if someone has a better way or a “best practice” way, I'd love to hear it.

Answer 1

This may work, Try it and let me know.

<script>
    document.addEventListener('DOMContentLoaded', () => {
        fs.readFile(path.join(__dirname, 'fragments/main/welcome.html'), 'utf8', (err, data) => {
            document.getElementById('content').innerHTML = data;
            var scripts = document.getElementById('content').getElementsByTagName("script");
            for (var i = 0; i < scripts.length; i++) {
              eval(scripts[i].innerText);
            }
        });
    });
</script>