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

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.

Ok, done a lot of fiddling and wasted a lot of time. But I got it figured.The solution in my last answer works fine for Chrome, and for Mozilla. But it does not work for blessed IE, because IE will not fire the onload event: it thinks it has dealt with all the onloads in this file and you can't get it to do another one. However, IE is quite happy to load the file up using the JQuery getScript function (which Chrome will not permit because of the ccess-control-allow-origin policy) -- you will need the JQuery libraries for this to work. So here is what I ended up with:

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

In all this, mylocaltext.js defines all my html as the content of a variable, mytext. Ugly, but it works. jQuery.support.scriptEval is true for intelligent browsers that fire onload events if the DOM changes. IE does not, so that sends it to .getScript; Chrome and others do, so that sends them the other way. Anyway this works on local files.

Interesting, but how can I use the same technique to load in a whole HTML file? Similar problem to yours -- I have hundreds of HTML files which I want to include within a web page, depending on what the user wants to see. It seems I can use this technique to load in a whole HTML page, something like:

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

ie, tell it load in HTML. I can see from the console that it is loading it into the page, and I get a message 'Resource interpreted as script but transferred with MIME type text/html'. But I cannot figure out any way to get at the HTML loaded in and held within the script