Welcome to Software Development on Codidact!

Will you help us build our independent community of developers helping developers? We're small and trying to grow. We welcome questions about all aspects of software development, from design to code to QA and more. Got questions? Got answers? Got code you'd like someone to review? Please join us.

Post History

66%

+2 −0

Q&A How to run a remote JavaScript file from GitHub?

As you're using userscripts, I'm assuming this code is supposed to run in a browser. Hence, you could download the scripts and add its contents to the page's DOM (by using a script element). For t...

posted 3y ago by hkotsubo‭ · edited 3y ago by hkotsubo‭

Answer

#2: Post edited by

hkotsubo‭ · 2021-09-14T19:27:08Z (about 3 years ago)

Copy Link

Raw

Markdown

As you're using userscripts, I'm assuming this code is supposed to run in a browser. Hence, you could download the scripts and add its contents to the page's DOM (by using a `script` element).
For that, you can use the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API):
```javascript
fetch('http://your.script.url', { cache: "no-store" }) // get the script without caching
.then(resp => resp.text()) // get script's content as text
.then(function(text) {
// add script text to DOM
let script = document.createElement('script');
script.innerText = text;
document.body.appendChild(script);
/************************************************************/
/* Here you do whatever you need after the script is loaded */
/************************************************************/
});
```
I used the `cache: "no-store"` option to not use browser's cache, but you can change that if you want. Check all the available options in the [documentation](https://developer.mozilla.org/en-US/docs/Web/API/Request/cache).
After loading the script, I get all its contents and add it to the page's DOM by creating a `script` element and setting its text to be the script's content.
---
It's important to note that all the code that depends on the script must be inside the callback, because the Fetch API relies on [Promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise), so if you try to do it outside the callback, it might not work:
```javascript
fetch('http://your.script.url', { cache: "no-store" })
.then(resp => resp.text())
.then(function(text) {
let script = document.createElement('script');
script.innerText = text;
document.body.appendChild(script);
// code that depends on the script must be here
});
// code that depends on the script must NOT be here
```
If you put the code outside the callback, it might run before the script is fully loaded. Only inside the callback your code is guaranteed to work, because there we know for sure that the script was completely loaded.

As you're using userscripts, I'm assuming this code is supposed to run in a browser. Hence, you could download the scripts and add its contents to the page's DOM (by using a `script` element).
For that, you can use the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API):
```javascript
fetch('http://your.script.url', { cache: "no-store" }) // get the script without caching
.then(resp => resp.text()) // get script's content as text
.then(function(text) {
// add script text to DOM
let script = document.createElement('script');
script.innerText = text;
document.body.appendChild(script);
/************************************************************/
/* Here you do whatever you need after the script is loaded */
/************************************************************/
});
```
I used the `cache: "no-store"` option to not use browser's cache, but you can change that if you want. Check all the available options in the [documentation](https://developer.mozilla.org/en-US/docs/Web/API/Request/cache).
After loading the script, I get all its contents and add it to the page's DOM by creating a `script` element and setting its text to be the script's content.
---
It's important to note that all the code that depends on the script must be inside the callback, because the Fetch API relies on [Promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise), so if you try to do it outside the callback, it might not work:
```javascript
fetch('http://your.script.url', { cache: "no-store" })
.then(resp => resp.text())
.then(function(text) {
let script = document.createElement('script');
script.innerText = text;
document.body.appendChild(script);
// code that depends on the script must be here
});
// code that depends on the script must NOT be here
```
If you put the code outside the callback, it might run before the script is fully loaded. Only inside the callback your code is guaranteed to work, because there we know for sure that the script was completely loaded.
---
You could extend that to load lots of scripts, and use [`Promise.all`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all) to make sure all were loaded:
```javascript
const urls = ['script1.url', 'script2.url', 'script3.url']; // add as many as you want
const scripts = [];
for (const url of urls) {
scripts.push(fetch(url, { cache: 'no-store' }).then(resp => resp.text()));
}
Promise.all(scripts)
// this runs only after all scripts are loaded
.then(function(texts) {
// add all scripts to page's DOM
for (const text of texts) {
let script = document.createElement('script');
script.innerText = text;
document.body.appendChild(script);
}
// code that depends on the scripts must be here
});
// code that depends on the scripts must NOT be here
```

#1: Initial revision by

hkotsubo‭ · 2021-09-14T18:28:43Z (about 3 years ago)

Copy Link

Raw

Markdown

As you're using userscripts, I'm assuming this code is supposed to run in a browser. Hence, you could download the scripts and add its contents to the page's DOM (by using a `script` element).

For that, you can use the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API):

```javascript
fetch('http://your.script.url', { cache: "no-store" }) // get the script without caching
    .then(resp => resp.text()) // get script's content as text
    .then(function(text) {
        // add script text to DOM
        let script = document.createElement('script');
        script.innerText = text;
        document.body.appendChild(script);

        /************************************************************/
        /* Here you do whatever you need after the script is loaded */
        /************************************************************/
    });
```

I used the `cache: "no-store"` option to not use browser's cache, but you can change that if you want. Check all the available options in the [documentation](https://developer.mozilla.org/en-US/docs/Web/API/Request/cache).


After loading the script, I get all its contents and add it to the page's DOM by creating a `script` element and setting its text to be the script's content.

---

It's important to note that all the code that depends on the script must be inside the callback, because the Fetch API relies on [Promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise), so if you try to do it outside the callback, it might not work:

```javascript
fetch('http://your.script.url', { cache: "no-store" })
    .then(resp => resp.text())
    .then(function(text) {
        let script = document.createElement('script');
        script.innerText = text;
        document.body.appendChild(script);

        // code that depends on the script must be here
    });

// code that depends on the script must NOT be here
```

If you put the code outside the callback, it might run before the script is fully loaded. Only inside the callback your code is guaranteed to work, because there we know for sure that the script was completely loaded.

Communities

Post History