How to execute an appended script in vanilla JavaScript?

JavaScript
1

I am trying to execute code (or call to code) available in website A --------- from website B.

In website B I do:

window.setTimeout(()=>{
    var newScript = document.createElement("script");
    newScript.setAttribute('type', 'text/javascript');
    newScript.setAttribute('src', 'https://raw.githubusercontent.com/USER/REPOSITORY/main/FILE.js');
    document.head.appendChild(newScript);
}, 1000);

This doesn’t cause the change that would occur if the code was executed, probably because I lack some command to execute it.
I think this way because the following code (which I currently don’t fully understand) does work, I mean, I call the exact same code (available website A) from the exact same website (website B) and it does work:

window.setTimeout(()=>{
fetch('https://raw.githubusercontent.com/USER/REPOSITORY/main/FILE.js').then(function(response) {
    if (!response.ok) {
        return false;
    }
    return response.blob();
}).then(function(myBlob) {
    var objectURL = URL.createObjectURL(myBlob);
    var sc = document.createElement("script");
    sc.setAttribute("src", objectURL);
    sc.setAttribute("type", "text/javascript");
    document.head.appendChild(sc);
})
}, 1000);

I don’t know why this second code works. This code reads very “sugary” or unintuitive for me, I would prefer to learn what I lacked in the first code instead just automatically use this second code.

What did I lack in the first code eval()?, bind()? Something else?

You may want to explain what is being done in the second code and if it can be written with clearer naming and without something like:

return response.blob();
}).then(function(myBlob) {

Thanks.

2

I’m confused about which website is A and which website is B.

Is B github?

Cause in the first blurb, you say:

which makes it sound like website B is the one executing the code.
and in the second blurb you say:

which makes it sound like website A is the one executing the code.

4

mm. Prepositional mess.

If… you control website A, why not just… yaknow… put a script tag in the HTML, and not use Javascript to load things?

1 Like
5

Also, what does the loaded script… do… or at least, does it do things when you load it? Or is it just a bunch of functions you’re loading and then trying to invoke some other way?

6

@m_hutley my sincerece apology for confused in the reply which I have deleted. I have edited the question to make it clearer that website A is GitHub (and not website B as I wrote in the deleted comment).

The code in GitHub is just a bunch of functions.

7

Okay, i’m guessing that you’re then doing document.head.appendChild(newScript); and immediately following it with doSomeFunction() and expecting it to work.

try newScript.addEventListener("load",doSomeFunction, false);

that way the page waits until the script is loaded, THEN tries to invoke the function.

8

If you meant that:

window.addEventListener("load",myFunction, false);
function myFunction() {
    var newScript = document.createElement("script");
    newScript.setAttribute('src', 'https://raw.githubusercontent.com/USER/REPOSITORY/main/FILE.js');
    newScript.setAttribute('type', 'text/javascript');
    document.head.appendChild(newScript);
};

This didn’t work in console; I only get “undefined”.

9

no, i meant it exactly as i typed it.
You set two attributes to your new script tag, set a listener too.

10

I came up with this, the order of code lines reads “most natural” for me.

var newScript = document.createElement("script");
newScript.addEventListener("load",myFunction, false);

function myFunction () {
    newScript.setAttribute('src', 'https://raw.githubusercontent.com/USER/REPOSITORY/main/FILE.js');
    newScript.setAttribute('type', 'text/javascript');
    document.head.appendChild(newScript);
};
11

fyi, you can’t link to scripts on github this way. Raw github URLs are not intended for hosting your assets.

12

I must find a workaround because the particular code I run is very general and helps me stay more focused on several computers I work with. I just want all loaders to load it from one place so if there is a change, I change only in one place for all terminals.

Perhaps, I should ask for explanation of the second code example above, which is the only one I found to work from nearly ten or twelve I have tested.

13

You could try jsDelivr CDN. They allow loading of files from github.

16

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.