Chargement de fichiers locaux avec Javascript sans serveur Web
J'ai besoin d'écrire un logiciel qui utilise HTML5 et canvas.
L'ensemble du logiciel devrait pouvoir fonctionner localement, sans avoir besoin d'un serveur. Donc, je suis seulement capable d'utiliser Javascript, pas de php.
La partie difficile: je dois extraire dynamiquement le contenu des fichiers texte nécessaires pendant le fonctionnement.
Par exemple: lorsque le logiciel démarre, j'ai besoin de "config.json" . Et après que l'utilisateur ait fait quelques remarques, j'ai besoin de "story1.txt" ou "story2.txt", etc.
Mon problème:
Je ne peux pas utiliser Ajax, car Chrome le bloque - les fichiers locaux ne sont pas autorisés à récupérer le contenu d'autres fichiers. Je reçois toujours un message d'erreur.
Ce que j'ai essayé jusqu'à présent:
Charger des fichiers avec Ajax et jQuery
Chrome ne me permet pas de charger le fichier
Charger le fichier dans script-tag
Même si je déclare le fichier JSON en tant que code js, je ne peux pas accéder au contenu du fichier chargé.
Charger le fichier dans une image invisible Iframe et lire son contenu
Chargement des travaux, et je peux voir le code. Mais lorsque j'essaie d'accéder au contenu de l'IFrame, le message d'erreur Google Chrome s'affiche à nouveau:
"Uncaught SecurityError: Blocked a frame with Origin "null" from accessing a frame with Origin "null". Protocols, domains, and ports must match."
Question:
Est-il possible de charger un fichier texte dynamiquement ou suis-je obligé d'utiliser un serveur Web?
Si vous insistez pour utiliser Chrome, certains indicateurs de ligne de commande lui permettent d'accéder aux fichiers d'origine locale (--allow-file-access-from-files/--disable-web-security). Notez que vous devez exécuter un navigateur complet à partir de rien avec ces drapeaux - c'est-à-dire que, s'il existe déjà d'autres drapeaux d'ouverture de fenêtres Chrome, cela n'aura aucun effet et cet effet persiste dans TOUTES les fenêtres jusqu'à la fermeture de Chrome, ce qui constitue évidemment un trou énorme. Sécurité.
Vous pouvez configurer un serveur local léger si vous compressez votre "application" avec une sorte de script de configuration automatique. Ce n'est toujours pas très bon, car vous devez installer un fichier exécutable que cet utilisateur peut ne pas vouloir ou même être totalement incapable d'installer à cause de restrictions.
Vous pouvez personnaliser votre application HTML/JS en tant qu'extension Chrome. Les extensions ont des autorisations beaucoup plus étendues que le code aléatoire, mais vous devez les distribuer via Google Play ou fournir des instructions pour installer manuellement des extensions pour vos utilisateurs.
Et enfin, vous pouvez formater toutes les données, y compris votre configuration et les fichiers texte que vous avez mentionnés comme code JavaScript valide - c’est-à-dire emballer un story1.txt à story1.js comme:
var myapp.story1 = "Complete text of story1.txt"
et sélectionnez simplement de manière dynamique les éléments dont vous avez besoin dans les vars correspondants ou utilisez même la manipulation DOM pour charger uniquement les scripts dont vous avez besoin en ajoutant dynamiquement des balises <script>. À mon avis, ce serait la meilleure option car il est moins intrusif: cela ne nécessite aucune installation/reconfiguration, cela fonctionne simplement.
Si vous avez simplement besoin d'un serveur Web "légal" rapide et facile pour amener votre navigateur à penser qu'il ne doit pas être extrait du système de fichiers local, utilisez simplement le simple serveur HTPP de Python. Il sert simplement des fichiers sur demande à partir de n'importe quel répertoire depuis lequel il a été appelé. Le serveur est par ailleurs idiot. Il n'exécutera pas de scripts PHP ni quoi que ce soit. Voici comment:
- Installez Python 2.7 sur votre machine de développement. C’est la seule chose que ce correctif installera de manière permanente.
- Ouvrez votre ligne de commande/fenêtre de terminal.
- Basculez vers le répertoire où résident vos scripts.
cd/Users/codemonkey/myCoolNewApp (par exemple sur un Mac)
- Exécutez ce qui suit:
python -m SimpleHTTPServer 80
Sur un ordinateur Mac ou Linux, vous devrez peut-être utiliser Sudo:
Sudo python -m SimpleHTTPServer 80
- Ouvrez votre navigateur et tapez:
http: //localhost/myapp.html (remplacez "myapp.html" par votre nom de script)
- Et le peuple se réjouit.
- Pour arrêter le serveur Web, revenez à la fenêtre du terminal dans laquelle il s'exécute et appuyez sur Ctrl-C. Ou fermez l'ordinateur. Ce serveur devra être redémarré à l’étape 4 à chaque fois que vous souhaitez l’exécuter.
Vous pouvez avoir beaucoup de fantaisie et exécuter plusieurs instances sur différents ports, mais cela dépasse le cadre de cette solution rapide.
J'ai trouvé que Firefox exécutera HTML et JS localement.
Vous devez mettre vos fichiers locaux sur le même serveur. Si vous utilisez un serveur local, vous devez installer un serveur Web en tant qu'Apache pour pouvoir accéder à votre emplacement "distant".
Tous les navigateurs modernes arrêtent cela, car vous ne devez pas lire les fichiers locaux à partir de AUCUN UTILISATEUR . Même si vous utilisez localhost.
En fonction de vos besoins, utiliser fetch ( https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API ) est une option:
fetch("./config.json").then(function(res) {
// res instanceof Response == true.
if (res.ok) {
res.json().then(function(data) {
console.log(data);
});
} else {
console.log("Looks like the response wasn't perfect, got status", res.status);
}
}, function(e) {
console.log("Fetch failed!", e);
});
Vous pouvez charger le fichier local dans le navigateur Chrome localement sans utiliser AJAX. vous pouvez utiliser normalement utiliser jQuery fonction comme $ .getJSON () pour charger le fichier dans le navigateur Chrome.
Mais si vous utilisez cette fonctionnalité jQuery, alors chrome Web Security bloquera votre fonction pour accéder au formulaire sous forme de fichier paquetage de fichiers. Sur le navigateur Firefox, il fonctionne parfaitement, mais si vous avez besoin du navigateur chrome, vous devez définir des drapeaux de chrome à l’aide de la ligne de commande.
Voici quelques étapes à suivre pour définir les indicateurs de chrome qui vous permettent d’obtenir des fonctionnalités supplémentaires vous permettant d’accéder au fichier de données à partir de votre système local. Les voici: -
- Quitter ou fermer toute instance en cours d'exécution de chrome.
- Recherchez le raccourci que vous utilisez normalement pour lancer chrome.
- Créez un copie de celui-ci.
- Cliquez avec le bouton droit sur le nouveau raccourci, et sélectionnez Propriétés.
- À la toute fin de la zone de texte Target:, ajoutez un espace, puis les indicateurs de ligne de commande souhaités. Cela devrait ressembler à quelque chose comme: "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files --disable-web-security
- cliquez sur le bouton "appliquer" puis sur le bouton "ok".
- Double-cliquez sur le nouveau raccourci pour lancer chrome avec les nouveaux indicateurs de ligne de commande.
Note: N'oubliez pas vos drapeaux désormais définis uniquement pour cette icône chromée. alors démarrez votre application avec cette icône chrome.
Ce que vous décrivez (et la solution proposée) sérieusement _ mine la sécurité du navigateur.
devrait pouvoir fonctionner localement, sans avoir besoin d'un serveur
Alors, comment le logiciel se met-il sur la machine? Si vous n'envoyez pas de DVD par la suite, le logiciel peut être déployé sous la forme d'une application HTML5 utilisant mise en cache basée sur le manifeste (pris en charge par tous les navigateurs modernes, y compris Chrome, MSIEFirefox ). Cela ne tient pas compte du stockage des données en tant que fichiers normaux - mais vous pouvez conserver les données dans un stockage local.
Je ferais une extension Chrome si vos exigences le permettent. Ils sont faciles à fabriquer et peuvent très bien fonctionner pour vous. http://developer.chrome.com/extensions/index.html