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

**xor AX AX** · 07/06/2018, 15h15

Bonjour,

Soit un fichier js.html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

et enfin foobar.js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

		<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.

**danielhagnoul** · 07/06/2018, 17h38

Fichier foobar.js :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Fichier main.js :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**xor AX AX** · 08/06/2018, 20h31

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.

**Marco46** · 08/06/2018, 21h43

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.

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

JavaScript

Vue hybride

Discussions similaires

Partager

Partager