使用javascript的cdn前缀相对路径

Question

I have a simple website with relative references to css files and javascript files in the header. Is there a way to expand these to absolute url's and prefix them with "cdn." automatically on page load?

Here is part of my current head:

<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" type="text/css" href="css/the-tooltip.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/utf8.js" type="text/javascript"></script>
<script src="js/sha1.js" type="text/javascript"></script>
<script src="js/validatious.js" type="text/javascript"></script>

What i need in the end is

<link rel="stylesheet" type="text/css" href="http://cdn.mydomain.com/css/default.css">
<link rel="stylesheet" type="text/css" href="http://cdn.mydomain.com/css/the-tooltip.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://cdn.mydomain.com/js/utf8.js" type="text/javascript"></script>
<script src="http://cdn.mydomain.com/js/sha1.js" type="text/javascript"></script>
<script src="http://cdn.mydomain.com/js/validatious.js" type="text/javascript"></script>

Answer 1

Here is how you can add prefix to all script elements:

function appendPrefix(prefix) {
  var scripts = document.getElementsByTagName('script'),
      links =  document.getElementsByTagName('link'),
      foreach = Array.prototype.forEach;
  foreach.call(scripts, function (s) {
    if (s.src && (/(http|https)/).test(s.src)) {
       s.src = prefix + s.src;
    }
  });
  foreach.call(links, function (l) {
    if (s.src && (/(http|https)/).test(l.href)) {
       l.href = prefix + l.href;
    }
  });
}

appendPrefix('http://stackoverflow.com/');

The script is pure JavaScript and works for both script and link tags. It will append the prefix only to those link and script tags which does not start with http:// .

Answer 2

You can do redirect requests /css/* or /js/* to cdn.example.com/css/* or cdn.example.com/js/* in configuration files of web server (eg, .htaccess for Apache-server) and browser get necessary files. This solution will make the load on your web server (not as much as send css or js files), so it is best to write path to cdn manually.

Answer 3

It appears like JS isn't the best solution. I solved the problem using PHP on the serverside instead. I defined a global $prefix variable and appended that to a dynamically generated hostname and path to get the absolute URL and still maintain portability of the script.