Contourner Chrome Access-control-allow-origin sur le système de fichiers local?

Question

J'ai lu l'autre d'une même origine thèmes de politique ici, mais je n'ai pas vu de solutions liées au système de fichiers local.

J'ai une application web (En vrac les sens du terme) qui doit être local servi. Je suis en train de charger une grande quantité de données en une fois que l'utilisateur a chargé la page, en fonction de ce qu'ils font sur la page web. Dans Firefox 3.5 et IE8, je suis en mesure d'utiliser jQuery AJAX() et GetScript() les méthodes pour le faire, mais dans Chrome cela échoue en raison de la Même Origine.

XMLHttpRequest ne peut pas charger file://test/testdir/test.js. Origine null n'est pas autorisé by Access-Control-Allow-Origin.

Ce qui se passe quand je fais quelque chose de simple comme

$.getScript("test.js");

Cela fonctionne parfaitement bien dans IE et Firefox.

Après la lecture d'un tas à ce sujet, j'ai décidé d'essayer d'écrire directement dans l'en-tête du document. Dans la console de Chrome j'ai tapé le texte suivant:

var head = document.getElementsByTagName("head")[0];  
var script =document.createElement('script');   
script.id = 'uploadScript';  
script.type = 'text/javascript';  
script.src = "upload.js";   
head.appendChild(script);

Cela fonctionne très bien lorsqu'il est collé dans la console - l' <script...test.js</script> élément est ajouté à la tête, d'évaluer et de contenu chargé dans le DOM.

Je pensais que cela a été un succès, jusqu'à ce que j'ai mis ce code dans un appel de fonction. Exactement le même code, lorsqu'il est appelé à partir d'une fonction, ajoute l'élément à la, mais ne pas évaluer le fichier JavaScript. Je n'arrive pas à comprendre pourquoi. Si j'utilise google Chrome, console pour arrêter l'exécution de la méthode, il est l'ajout de l'élément au et exécuter le code ci-dessus, il n'a pas l'évaluer. Cependant, si j'ai relancer l'exécution et exécuter exactement le même code (en le collant dans la fenêtre de la console), il fonctionne. Je suis à une perte pour expliquer cela. Quelqu'un a abordé ce avant?

J'ai lu sur le suivant de SORTE que les messages, mais ils ne décrivent pas le problème que j'ai:

Des moyens pour contourner la politique de " même origine
XMLHttpRequest Origine null n'est pas autorisé de Contrôle d'Accès-Accès-Permettre de fichier:/// file:/// (sans serveur)
Cross-site XMLHttpRequest

Encore une fois, mon dernier recours est de charger toutes les données sur la page web de charge, Ce qui peut entraîner jusqu'à un délai de 10 secondes lors du chargement de la page web qui est inutile pour 90% de l'application des utilisateurs.

Merci pour toutes les suggestions/solutions de rechange!!!

Answer 1

Je pense que j'ai compris.

Tout ce que je vraiment besoin de faire est d'ajouter un rappel dans mon <script> balise. Code Final:

J'ai un élément nommé prochaine... Donc, en $("#next").click() de la fonction, j'ai le code suivant. Ce sera exécuté si on clique sur "suivant".

//remove old dynamically written script tag-    
       var old = document.getElementById('uploadScript');  
   if (old != null) {  
     old.parentNode.removeChild(old);  
     delete old;  
   } 

   var head = document.getElementsByTagName("head")[0];  
   script = document.createElement('script');  
   script.id = 'uploadScript';  
   script.type = 'text/javascript';  
   script.src = 'test/' + scope_dir + '/js/list.js';  
   script.onload = refresh_page;    
   head.appendChild(script);  


function refresh_page(){  
   //perform action with data loaded from the .js file.  
}  

Cela semble fonctionner, et permet à google Chrome pour charger dynamiquement .js fichiers sur le système de fichiers local tout en contournant l'access-control-allow-origin politique que j'ai rencontré en essayant d'utiliser des fonctions jQuery.

Answer 2

Ok, fait beaucoup de tripoter et perdu beaucoup de temps. Mais je l'ai pensé. La solution dans ma dernière réponse fonctionne très bien pour google Chrome, et Mozilla. Mais il ne fonctionne pas pour la bienheureuse c'est à dire, car IE ne déclenche pas l'événement onload: il pense qu'il a abordé tous les onloads dans ce fichier et que vous ne pouvez pas l'obtenir pour en faire un autre. Cependant, c'est à dire est assez heureux pour charger le fichier à l'aide de JQuery getScript fonction (qui Chrome ne sera pas permis à cause de l'accès-control-allow-origin policy) - vous aurez besoin les bibliothèques JQuery pour que cela fonctionne. Voici donc ce que j'ai:

function getMyText(){
    var url='mylocalfile.js';
    if (jQuery.support.scriptEval) { 
        var old = document.getElementById('uploadScript');  
        if (old != null) {  
             old.parentNode.removeChild(old);  
             delete old;  
            } 
        var head = document.getElementsByTagName("head")[0]; 
        var script = document.createElement('script');
        script.id = 'uploadScript';
        script.type = 'text/javascript';
        script.onload = refresh_page; 
        script.src = url; 
        head.appendChild(script);  
    } else {
       $.getScript(url,function(){
            refresh_page();
      });
     }
}

function refresh_page() {
    alert(mytext);
}

Dans tout cela, mylocaltext.js définit tous mes html comme le contenu d'une variable, mytext. Moche, mais ça fonctionne. jQuery.de soutien.scriptEval est vrai pour intelligent navigateurs que le feu onload événements si le DOM changements. IE n'est pas, de sorte que l'envoie .getScript; Chrome et d'autres, de sorte que les envoie dans l'autre sens. De toute façon cela fonctionne sur les fichiers locaux.

Answer 3

Intéressant, mais comment puis-je utiliser la même technique pour charger un ensemble de fichiers HTML? Problème similaire à la vôtre -- j'ai des centaines de fichiers HTML que je veux inclure dans une page web, en fonction de ce que l'utilisateur veut les voir. Il semble que je peux utiliser cette technique pour charger toute une page HTML, quelque chose comme:

script.id = 'uploadScript';
script.type = 'text/html';
script.src = url; 
script.onload = refresh_page; 
head.appendChild(script);  

c'est à dire, le dire de la charge en HTML. Je peux voir à partir de la console qu'il est de les charger dans la page, et je reçois un message de Ressources interprété comme script mais transféré, avec le type MIME text/html'. Mais je ne peux pas comprendre de toute façon pour obtenir le code HTML chargé et tenue dans le script