accedere ad una variabile in un altro file

**astros3** · 30-09-2024, 16:27

Ciao a tutti, ecco il mio problema.

Ho creato questi file

codice:

index.html
start.js
config.js

Esaminiamoli

codice:

$ cat index.html
<html>
<head>
    <script type="text/javascript" src="start.js"></script>
</head>
<body onload="start()">


</body>
</html>

$ cat start.js 
function start() {
    var script = document.createElement("script");

    script.src = "config.js";
    script.type = "text/javascript";
    script.async = false;
    
    console.log(xxx);
}

$ cat config.js
var xxx = 123;

Nel browser apro index.html è mi da questo errore

Uncaught ReferenceError: xxx is not defined
at start (start.js:8:17)
at onload (index.html:5:24)

Perchè?

**alka** · 30-09-2024, 17:41

Originariamente inviata da astros3

Nel browser apro index.html è mi da questo errore

Uncaught ReferenceError: xxx is not defined
at start (start.js:8:17)
at onload (index.html:5:24)

Perchè?

Hai creato l'elemento <script>, ma dove l'hai inserito?

Finché non fai una addChild() non credo funzioni.

codice:

document.body.appendChild(script);

Fai un controllo.

**alka** · 30-09-2024, 17:41

(doppio)

**astros3** · 30-09-2024, 20:37

codice:

$ cat index.html 
<html>
<head>
    <script type="text/javascript" src="start.js"></script>
</head>
<body onload="start()">




</body>
</html>

$ cat start.js 
function start() {
    var script = document.createElement("script");


    script.src = "config.js";
    script.type = "text/javascript";
    script.async = false;
    
    document.body.appendChild(script);
    console.log(xxx);
}

$ cat config.js 
var xxx = 123;res$

Uncaught ReferenceError: xxx is not defined
at start (start.js:9:17)
at onload (index.html:5:24)
start @ start.js:9
onload @ index.html:5

**alka** · 30-09-2024, 22:02

Originariamente inviata da astros3

Uncaught ReferenceError: xxx is not defined
at start (start.js:9:17)
at onload (index.html:5:24)
start @ start.js:9
onload @ index.html:5

Ok, ho capito che riporti il dettaglio dell'errore, ma un po' di intraprendenza: aggiungi qualche log, vai in debug passo passo, fai il minimo sforzo per cercare di capire cosa non va.

A mio avviso, la cosa non può funzionare così, perché quando tu crei l'elemento dello script all'interno della funzione start(), la funzione termina prima che il browser passi ad eseguire ciò che c'è all'interno dello script. Non si può spezzare una funzione *non* asincrona in due parti.

Il tuo log di "xxx" arriva evidentemente prima dell'esecuzione dello script config.js.

Per provarlo rapidamente, basterebbe loggare il valore della variabile "xxx" in questo modo:

codice:

  setTimeout(() => {
    console.log(xxx);
  }, 0);

Così facendo, l'istruzione di log viene inserita nell'Event Loop e quindi verrà eseguita in seguito, dando tempo alla funzione di terminare e all'altro script di venire caricato ed eseguito.

Mi chiedo comunque a cosa serva questa soluzione nello specifico, al posto di caricare banalmente i due script, ma questa è pura curiosità.

**astros3** · 01-10-2024, 10:45

Ti riporto lo scenario reale

codice:

$ tree├── index.html
├── resources
│   └── example.js
└── window-resources.js


$ cat index.html 
<html>
<head>
    <script type="text/javascript" src="window-resources.js"></script>
</head>
<body onload="open_window_resources()">


</body>
</html>


$ cat window-resources.js 
function open_window_resources() {
    const searchParams = new URLSearchParams(window.location.search);


    var script = document.createElement("script");
    var
        day = searchParams.has('day') ? searchParams.get('day') : new Date().getDate(),
        day2Digits = String(day).padStart(2, "0")
    ;


    script.src = "resources/" + searchParams.get("config_filename") + ".js";
    script.type = "text/javascript";
    script.async = false;


    setTimeout(() => {
        document.head.appendChild(script);
    }, 0);


    url_templates.forEach(
        function (template) {
            var url = template
                .replace("%1", day)
                .replace("%2", day2Digits)
            ;


            window.open(url);
        }
    );
}


$ cat resources/example.js 
var url_templates = new Array(
    "URL1",
    "URL2",
    "URL3",
);


$ xdg-open index.html?config_filename=example


Uncaught ReferenceError: url_templates is not defined
    at open_window_resources (window-resources.js:18:5)
    at onload (index.html?config_filename=example:5:40)
open_window_resources @ window-resources.js:18
onload @ index.html?config_filename=example:5

**alka** · 01-10-2024, 10:56

Originariamente inviata da astros3

Ti riporto lo scenario reale

Capisco la necessità, ma mi pare una grossa complicazione.
Ad ogni modo, è una cosa che si può fare, quindi ci sta.

Originariamente inviata da astros3

Uncaught ReferenceError: url_templates is not defined
at open_window_resources (window-resources.js:18:5)
at onload (index.html?config_filename=example:5:40)
open_window_resources @ window-resources.js:18
onload @ index.html?config_filename=example:5

Non hai letto attentamente la mia risposta.

**astros3** · 01-10-2024, 13:28

Purtroppo uso js una volta ogni tre anni (solo per qualche esigenza particolare) e mi dispiace perchè non sono per nulla pratico.
Il debug passo passo non ho idea di come si faccia, e con quali strumenti, non lo so

Se può aiutare

codice:

$ cat window-resources.js 
function open_window_resources() {
    setTimeout(() => {
        console.log('aaa')
    }, 0);
    const searchParams = new URLSearchParams(window.location.search);


    var script = document.createElement("script");
    var
        day = searchParams.has('day') ? searchParams.get('day') : new Date().getDate(),
        day2Digits = String(day).padStart(2, "0")
    ;


    script.src = "resources/" + searchParams.get("config_filename") + ".js";
    script.type = "text/javascript";
    script.async = false;


    document.head.appendChild(script);
    setTimeout(() => {
        console.log('ccc')
    }, 0);


    url_templates.forEach(
        function (template) {
            var url = template
                .replace("%1", day)
                .replace("%2", day2Digits)
            ;


            window.open(url);
        }
    );
}


$ cat resources/example.js 
var url_templates = new Array(
    "URL1",
    "URL2",
    "URL3",
);
setTimeout(() => {
    console.log('bbb')
}, 0);

In console

codice:

Uncaught ReferenceError: url_templates is not defined
    at open_window_resources (window-resources.js:22:5)
    at onload (index.html?config_filename=example:5:40)
open_window_resources @ window-resources.js:22
onload @ index.html?config_filename=example:5
window-resources.js:3 aaa
window-resources.js:19 ccc
example.js:7 bbb

Da cui intuisco che ccc viene eseguito prima di bbb
Perchè?

A mio avviso, la cosa non può funzionare così, perché quando tu crei l'elemento dello script all'interno della funzione start(), la funzione termina prima che il browser passi ad eseguire ciò che c'è all'interno dello script.

Perchè?

Non si può spezzare una funzione *non* asincrona in due parti.

Il tuo log di "xxx" arriva evidentemente prima dell'esecuzione dello script config.js.

Perchè?

**astros3** · 01-10-2024, 14:34

Per giunta

codice:

    script.async =false;

Pensavo servisse a qualcosa, ma da quello che si vede...
OK, uso altri linguaggi ma Java Script proprio non mi si appiglia

**alka** · 01-10-2024, 15:29

Originariamente inviata da astros3

Purtroppo uso js una volta ogni tre anni (solo per qualche esigenza particolare) e mi dispiace perchè non sono per nulla pratico.

Se vuoi programmare in JavaScript, devi essere pratico di JavaScript, almeno un minimo.

Originariamente inviata da astros3

Il debug passo passo non ho idea di come si faccia, e con quali strumenti, non lo so

Ma si può sempre imparare, studiando.

Originariamente inviata da astros3

In console

codice:

Uncaught ReferenceError: url_templates is not defined
    at open_window_resources (window-resources.js:22:5)
    at onload (index.html?config_filename=example:5:40)
open_window_resources @ window-resources.js:22
onload @ index.html?config_filename=example:5
window-resources.js:3 aaa
window-resources.js:19 ccc
example.js:7 bbb

Da cui intuisco che ccc viene eseguito prima di bbb
Perchè?
Perchè?
Perchè?

Ma come "perché"?
E' come dire "ho due istruzioni, e una viene prima dell'altra... perché?".
Perché quello è l'ordine delle cose, è il principio di funzionamento del linguaggio, la convenzione prestabilita.

L'uso di setTimeout() non voleva essere una proposta di soluzione, ma una dimostrazione del fatto che tutto ciò che viene "rimandato", viene eseguito in seguito, a dimostrazione che lo script referenziato dall'elemento nella pagina viene eseguito sicuramente dopo quello che lo definisce, ma con l'uso del setTimeout() si "rimanda a dopo" la sua esecuzione.

Tu hai una funzione che crea un elemento il quale referenzia lo script da eseguire: ogni contenuto di quello script verrà eseguito dopo quello attuale, perché JavaScript non è multithreading e ciò che stai caricando si mette in coda alla routine corrente.

L'uso di setTimeout() serviva a dimostrare che, pur con un intervallo a zero, se gli fai eseguire la stampa di qualcosa definita nello script che stai caricando dalla funzione, questa stampa va a buon fine, questo perché quella stampa in console viene dopo il caricamento dello script, che viene dopo l'esecuzione della funzione che crea l'elemento dello script nella pagina.

In sintesi, non puoi nella stessa funzione utilizzare variabili definite nello stesso script che viene eseguito da un elemento <script> caricato dinamicamente.

OK, uso altri linguaggi ma Java Script proprio non mi si appiglia

In altri linguaggi sarebbe uguale, a parità di scenario.
Non è un problema del linguaggio.

Studia l'Event Loop di JavaScript..

Discussione: accedere ad una variabile in un altro file

Strumenti discussione

Ricerca discussione

Visualizza

accedere ad una variabile in un altro file

Permessi di invio