javascript - Circumventing Chrome Access-control-allow-origin on the local file system?

Question

I've read the other same origin policy topics here on SO, but I haven't seen any solutions related to the local file system.

I have a web app (In a loose sense of the word) that must be local served. I am trying to load a large amount of data in after the user has loaded the page, depending on what they are doing on the webpage. In Firefox 3.5 and IE8 I am able to use jQuery's AJAX() and GetScript() methods to do this, but in Chrome this fails due to the Same Origin Policy.

XMLHttpRequest cannot load file://test/testdir/test.js. Origin null is not allowed by Access-Control-Allow-Origin.

This happens when I do something simple like

$.getScript("test.js");

This functions perfectly well in IE & Firefox.

After reading a bunch about this, I decided to try writing directly into the head of the document. In the console in Chrome I typed the following:

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);

This works fine when pasted in the console- the <script...test.js</script> element is added to the head, evaluated, and content loaded into the DOM.

I thought this was successful, until I put this code into a function call. The same exact code, when called from a function, adds the element to the but does not evaluate the JavaScript file. I can not figure out why. If I use Chrome's console to stop execution in the method that it is adding the element to the and run the above code, it does not evaluate it. However, if I unpause the execution and run the exact same code (pasting it in the console window) it works. I'm at a loss to explain this. Has anyone dealt with this before?

I've read up on the following SO posts, but they are not describing the problem that I have:

Ways to circumvent the same-origin policy
XMLHttpRequest Origin null is not allowed Access-Control-Allow-Origin for file:/// to file:/// (Serverless)
Cross-site XMLHttpRequest

Again, my last resort is to load all the data at the webpage's load- This can cause up to a 10 second delay in loading the webpage that is unnecessary for 90% of the app's users.

Thanks for any suggestions/alternatives!!!

Answer 1

I think I've figured it out.

All I really needed to do was add a callback into my <script> tag. Final code:

I have an element named next... So, in the $("#next").click() function I have the following code. This only gets executed if they click "next".

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

This seems to work, and allows Chrome to dynamically load .js files on the local file system while circumventing the access-control-allow-origin policy I ran into while trying to use jQuery functions.