Import de fonctions (module) import * as xlang from "./US-us.js";

Version imprimable

Bonjour,

Soit un fichier js.html
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script language="JavaScript" type="text/javascript" src="main.js"></script> </head> <body> <div id="main"> <div id="data1"> </div> <div id="data2"> </div> <div id="data3"> </div> <div id="data4"> </div> </div> <script type="text/javascript"> window.addEventListener("load", function(event) { go(); }); </script> </body> </html>
Voici le fichier main.js :
Code:

1 2 3 4 5 import {foo} from "./foobar.js"; function go() { document.getElementById("data1").innerHTML="data1"; }
et enfin foobar.js :

Code:

export function foo() { return "Test Ok"; }

A l'exécution, Firefox me dit import declarations may only appear at top level of a module

Je modifie donc le header html en

Code:

<script language="JavaScript" type="module" src="main.js"></script>

J'ai alors le message <i>go is not defined</i>.
D'ailleurs, foo() n'est pas non plus défini.

Je tourne en rond depuis ce matin.

Pour sa part, Chrome me dit :

Access to Script at 'file:///{mon_chemin}/js/main.js' from origin 'null' has been blocked by CORS policy: Invalid response. Origin 'null' is therefore not allowed access.
js.html:20 Uncaught ReferenceError: go is not defined at js.html:20

Des idées ? (merci par avance de vos réponses).

Pour info, c'est pour localiser une appli JS.

:salut:

Fichier foobar.js :

Code:

1
2
3
4
5
'use strict';
 
export function foo() {
    return "Test Ok";
}

Fichier main.js :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
import {
    foo
} from "./foobar.js";

function go() {
    document.querySelector('#data1').innerHTML = '<p>data1</p>';
}

document.addEventListener('DOMContentLoaded', ev => {
    // le DOM est construit, la page web n'est pas visible
    // début code du test


    // fin code du test
}, {
    capture: false,
    passive: true,
    once: false
});

window.addEventListener('load', ev => {
    // le DOM est construit et la page web est visible
    // début code du test

    go();

    // fin code du test
}, {
    capture: false,
    passive: true,
    once: false
});

Fichier index.html :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="cache-control" content="public, max-age=60">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>Test module</title>
    <script type="module" src="main.js"></script>
</head>

<body>

    <div id="main">
        <div id="data1">
        </div>
        <div id="data2">
        </div>
        <div id="data3">
        </div>
        <div id="data4">
        </div>
    </div>

</body>

</html>

08/06/2018, 20h31
xor AX AX

Merci, ça fonctionne mais...

Ca fonctionne grâce à ton/votre aide rapide dont je te/vous remercie mais ça a un effet de bord :

les liens dans le html vers des fonctions js sont hors-service : <div id="data2" onclick="go()"> go est inconnu puisque plus dans le même nameSpace (scope) à cause du html type="module".

Je peux les recoder en document.querySelector('#data2').onclick="go()"; mais dans mon cas, cela ne fonctionne pas car je génère dynamiquement mes tags div et que la fonction appelée change selon l'Id du div.

Donc :
1. je marque ce post en résolu
2. j'abandonne temporairement cette solution car (en synthèse, c'est beaucoup de problèmes pour une si petite fonctionnalité) :
2.1 ça m'emmène trop loin pour l'instant pour une simple question de localize alors que j'ai encore du boulot important sur des fonctionnalités de l'application.
2.2 Chrome, à la suite du passage en module, m'indique Access to Script at 'file:///C:{mon_chemin}/js/main.js' from origin 'null' has been blocked by CORS policy: Invalid response. Origin 'null' is therefore not allowed access.
2.3 à la suite du point 2.2, cette application ayant vocation (et ça tourne actuellement) à être aussi embarquée comme application native Android (webview, programmation hybride), je me demande ce que cela va donner. L'objectif du wrapper Android est d'apporter des fonctionnalités spécifiques smartPhone (GPS, SMS, photo...)
2.4 si l'utilisateur change de langue, comment ça se passe puisque les imports ne peuvent intervenir qu'au topLevel ?

Ton/votre avis ?

1. j'arrête immédiatement l'informatique et me consacre à la vente de tongs pour unijambistes (pied droit) en Arctique. Back to the trees
2. je code temporairement une solution simple et laisse tourner le problème en tâche de fond (ça eut marché il y a quelques temps, ça marche moins bien maintenant)

Merci pour vos retours.
08/06/2018, 21h43
Marco46

Une application web est supposée être servie par un serveur web, lancer le fichier index.html depuis l'explorateur de fichier n'est pas une bonne solution. Cf cette discussion.