Adding Scripts to HTML files through JavaScript Electron

Question

I'm trying to add scripts to HTML files dynamically using JavaScript (to save space - I've many HTML files each of which contains many scripts, so they would al be added simply by including one script file).

The question Append javascript to HTML fields using through javascript is not really what I was thinking about...

However, in the script file that adds scripts and other resources to the HTML file in question, the scripts do add the external files, but the scripts (those inserted dynamically) are not loaded.

Directory Structure

root
 ├ index.html
 ├ universal-scripts.js (adds scripts to .html files dynamically)
 ├ styling.css (included into .html files)
 └ app-scripts
    └ others.js (problem file)

universal-scripts.js

...
var others = document.createElement("script");
others.setAttribute("src", "app-scripts/others.js");
...
document.getElementsByTagName("head")[0].innerHTML = document.getElementsByTagName("head")[0].innerHTML + others.outerHTML;

The script is inserting the element but functions from others.js are not usable from within index.html.

Any help would be much appreciated. Thanks!

I'm using Electron if that means anything...

Have you considered a build tool like Gulp? It is a task runner that can, among many other things, find and combine many .js files into one file so that you can simply put them anywhere in your project directory and they will get loaded. — Nate Vaughan
– Nate Vaughan, Commented Aug 27, 2016 at 4:02

andre mcgruder · Accepted Answer · 2016-08-27 05:05:08Z

2

Probably the best way is to add the reference to the file in your package.js file since this is where all of the rest of your projects source file are referenced. Why load it latter when you can load it in your core.

Here is a Electron.js tutorial that talks about the package.js file.

Creating Your First Desktop App With HTML, JS and Electron]1

Here is a package.js interactive guide. package.js walk through

edited Aug 27, 2016 at 5:05

answered Aug 27, 2016 at 3:52

andre mcgruder

1,5521 gold badge11 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Theo Over a year ago

How could I get the file from the html files when it's referenced from the package?

andre mcgruder Over a year ago

The package.js file loads all of you files. It's like an executable file.

Theo Over a year ago

So I could include the scripts in the 'scripts' section? But then what do I do? (sorry if this sounds daft)

Theo Over a year ago

I seriously don't understand the package.json approach to including .js files that index.html can use. Somebody please help?

Marc Rochkind Over a year ago

There isn't a single "scripts" section. You can have a script element anywhere you like, such as at the end of the body. In that script element, just code a call to the "require" function. If you look at the Electron Quick Start example at electron.atom.io, this is exactly what's done there.

Collectives™ on Stack Overflow

Adding Scripts to HTML files through JavaScript Electron

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related