Appending Script SRC Causes Cross Origin Requests Error

Question

Essentially I have a site that needs dynamically loaded content - specifically locales. I need multi-lingual support for my site, so the general idea is that I have a query param like ?language=english and english would then get appended to the header so that it grabs the right data to be used in my web page. So like:

//script 1

//getLanguage() gets the specified query parameter, like 'english'
$('head').append('<script src=' + getLanguage() + '.js'></script>');

Then throughout script 1 I would do like:

$('#mainHeader').append(window.i18n['home'].mainHead());

And this is the english version of the script where the variables are defined:

//english.js

(function(A) {
A.i18n = {
  home: {
    mainHead: function(b) { return 'test123'; },
  }
}
})(this);

This works when running on a local webserver. Running it as a file (which is what I need to do) I get this:

"XMLHttpRequest cannot load file://...english.js?_=1449747918242. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource." AND "Uncaught TypeError: Cannot read property 'home' of undefined"

I have attempted to use pure javascript, and this gives "Uncaught TypeError: Cannot read property 'home' of undefined":

var head= document.getElementsByTagName('head')[0];
var script= document.createElement('script');
script.type= 'text/javascript';
script.src= getLanguage() + '.js';
head.appendChild(script);

Any suggestions on how to proceed? I have been trying various potential solutions for a day now and nothing seems to work.

`file://` ... chrome doesn't like doing stuff like that in `file` protocol — Jaromanda X, Dec 10 '15 at 11:56
Ok what you are saying is that you want to run local file from a webpage deserved from external server? Why don't you put your included script on server? — A. Wolff, Dec 10 '15 at 11:58
jQuery has a system for handling strings of HTML. That system is incompatible with adding scripts. It has a workaround for this which uses Ajax. This breaks on cross-origin requests. The pure JavaScript work around you have should solve it, but you need to be a lot more specific than "causes problems". — Quentin, Dec 10 '15 at 12:00
I want to run a local file, as a webpage, calling other local files. — William Paul, Dec 10 '15 at 12:00
That's it then: http://stackoverflow.com/questions/4819060/allow-google-chrome-to-use-xmlhttprequest-to-load-a-url-from-a-local-file — A. Wolff, Dec 10 '15 at 12:00
@Quentin When I say "causes problems" it gives me "Uncaught TypeError: Cannot read property 'home' of undefined" — William Paul, Dec 10 '15 at 12:02
You have to wait for the script to load and execute before you can use the results from it. — Quentin, Dec 10 '15 at 12:03
@A.Wolff that deals with the issues with chrome, this is to be cross-browser, so I want to fix the issues caused by jQuerys security policies — William Paul, Dec 10 '15 at 12:04
@Quentin sure but here the script isn't loaded. OP should check the net regarding error he gets — A. Wolff, Dec 10 '15 at 12:04
@A.Wolff — It is loaded when he uses the code in the final script block, it just doesn't run *between* that code running and the stuff marked as "Then throughout script 1" — Quentin, Dec 10 '15 at 12:05
@Quentin How can I ensure the script has loaded and executed before the other scripts? — William Paul, Dec 10 '15 at 12:05
@WilliamPaul That's not the way it should be done. Running local server is your best bet. If it's not possible because e.g you share just some file to user and let them to run it inside their own browser without any running local server, i don't see any solution... — A. Wolff, Dec 10 '15 at 12:06
@WilliamPaul — Before you execute the specific statements in it which depend on the results of english.js. They can be defined in functions and then called later. — Quentin, Dec 10 '15 at 12:08
@Quentin essentially every statement in script1 revolves around appending html to divs with data from english.js — William Paul, Dec 10 '15 at 12:34
@Quentin so really I need to run this script before everything else — William Paul, Dec 10 '15 at 12:39
@Quentin and surely if `$('head').append('');` works on local host, then my javascript solution should ? — William Paul, Dec 10 '15 at 12:41
Do you realize that telling it to load a resource from somewhere other than the source server is the exact *definition* of a cross origin request? — David Hoelzer, Dec 10 '15 at 15:49
@DavidHoelzer the resource I am trying to load is in the same place as the html file — William Paul, Dec 10 '15 at 15:53
You indicated in your question that you are pointing at it with `file://...` — David Hoelzer, Dec 10 '15 at 15:53
@DavidHoelzer not directly, the html file is also under the file:/// domain. — William Paul, Dec 10 '15 at 15:56

score 0 · Accepted Answer · answered Dec 10 '15 at 15:56

Issue related to:

$('head').append('<script src=' + getLanguage() + '.js></script>');

Fixed by:

document.write('<' + 'script src=' + getLanguage() + '.js' + ' type="text/javascript"><' + '/script>');

jQuery seems to have issues relating to making non-http requests to files on the same domain.

Appending Script SRC Causes Cross Origin Requests Error

1 Answers1