web-dev-qa-db-fra.com

Problèmes liés à jQuery getJSON lors de l'utilisation de fichiers locaux dans Chrome

J'ai une page de test très simple qui utilise des requêtes XHR avec les méthodes $ .getJSON et $ .ajax de jQuery. La même page fonctionne dans certaines situations et pas dans d'autres. Spécifiquement, cela ne fonctionne pas dans Chrome sous Ubuntu.

Je teste sur Ubuntu 9.10 avec Chrome 5.0.342.7 beta et Mac OSX 10.6.2 avec Chrome 5.0.307.9 beta.

  • Il fonctionne correctement lorsque les fichiers sont installés sur un serveur Web à la fois sous Ubuntu/Chrome et Mac/Chrome ( essayez-le ici ).
  • Il fonctionne correctement lorsque les fichiers sont installés sur le disque dur local sous Mac/Chrome (accessible avec le fichier: /// ...).
  • Il ÉCHOUE lorsque les fichiers sont installés sur le disque dur local sous Ubuntu/Chrome (accès avec le fichier: /// ...).

Le petit ensemble de 3 fichiers peut être téléchargé dans un fichier tar/gzip à partir d’ici: http://issues.tauren.com/testjson/testjson.tgz

Quand cela fonctionnera, la console Chrome indiquera:

XHR finished loading: "http://issues.tauren.com/testjson/data.json".
index.html:16Using getJSON
index.html:21
Object
result: "success"
__proto__: Object
index.html:22success
XHR finished loading: "http://issues.tauren.com/testjson/data.json".
index.html:29Using ajax with json dataType
index.html:34
Object
result: "success"
__proto__: Object
index.html:35success
XHR finished loading: "http://issues.tauren.com/testjson/data.json".
index.html:46Using ajax with text dataType
index.html:51{"result":"success"}
index.html:52undefined

Lorsque cela ne fonctionne pas, la console Chrome affichera ceci:

index.html:16Using getJSON
index.html:21null
index.html:22Uncaught TypeError: Cannot read property 'result' of null
index.html:29Using ajax with json dataType
index.html:34null
index.html:35Uncaught TypeError: Cannot read property 'result' of null
index.html:46Using ajax with text dataType
index.html:51
index.html:52undefined

Notez qu'il ne montre même pas les demandes XHR, bien que le gestionnaire de réussite soit exécuté. Je jure que cela fonctionnait auparavant dans Ubuntu/Chrome et je crains que quelque chose ne se soit égaré. J'ai déjà désinstallé et réinstallé Chrome, mais cela n'a pas aidé.

Est-ce que quelqu'un peut l'essayer localement sur votre système Ubuntu et me dire si vous avez des problèmes? Notez que cela semble fonctionner correctement dans Firefox.

ajaxjsonjquerygoogle-chrome
48
Tauren

Il s'agit d'un problème connu avec Chrome.

Voici le lien dans le traqueur de bugs:

Problème 40787: Les fichiers locaux ne se chargent pas avec Ajax

30
Daniel Furrer

Une autre façon de le faire est de démarrer un serveur HTTP local sur votre annuaire. Sur Ubuntu et MacOs avec Python installé, c'est un one-liner.

Accédez au répertoire contenant vos fichiers Web et:

python -m SimpleHTTPServer

Puis connectez-vous à http: // localhost: 8000/index.html avec n’importe quel navigateur Web pour tester votre page.

38
Sébastien RoccaSerra

Sous Windows, Chrome peut être installé dans votre dossier AppData:

"C:\Utilisateurs \\ AppData\Local\Google\Chrome\Application"

Avant d'exécuter la commande, assurez-vous que toutes vos fenêtres Chrome sont fermées et ne fonctionnent pas. Ou bien, le paramètre de ligne de commande ne serait pas efficace.

chrome.exe --allow-file-access-from-files
13
Thomas

Vous pouvez placer votre fichier json en js et l’enregistrer en variable globale. Ce n'est pas asynchrone, mais cela peut aider.

3
Zdeněk Mlčoch

@ Mike Sur Mac, tapez ceci dans Terminal:

open -b com.google.chrome --args --disable-web-security
1
Shazron

Ce code fonctionnait parfaitement avec sheet.jsonlocally avec la synchronisation de navigateur en tant que serveur local. - Mais lorsque sur mon serveur distant, j’ai obtenu un fichier 404 pour le fichier sheet.json avec Chrome ..__, il fonctionnait parfaitement dans Safari et Firefox .- Le nom sheet.json a été remplacé par sheet.JSON. Ensuite, cela a fonctionné sur le serveur distant . Quelqu'un d'autre a cette expérience?

getthejason = function(){
var dataurl = 'data/sheet.JSON';
var xhr = new XMLHttpRequest();
xhr.open('GET', dataurl, true);
xhr.responseType = 'text';
xhr.send();
console.log('getthejason!');

xhr.onload = function() {
.....
}
1
Luke Dohner

Un autre moyen de résoudre le problème consiste à utiliser les méthodes sandbox de sécurité Local Only et FlashInterface de Flash Player. Il est possible de demander à JavaScript une application Flash publiée à l'aide du sandbox de sécurité Local Only pour charger le fichier à partir du disque dur. Flash peut également transmettre les données à JavaScript via la classe ExternalInterface de Flash. J'ai testé cela dans Chrome, FF et IE9, et cela fonctionne bien. Je serais heureux de partager le code si quelqu'un est intéressé.

EDIT: J'ai lancé un projet de code Google (ironique?) Pour la mise en œuvre: http://code.google.com/p/flash-loader/

1
CommissarXiii