Question

我有一个简单的网站，相对引用标题中的css文件和javascript文件。有没有办法将它们扩展为绝对URL并用“cdn”作为前缀。自动加载页面？

以下是我现任主管的一部分：

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

我最终需要的是

<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

以下是为所有脚本元素添加前缀的方法：

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

该脚本是纯JavaScript，适用于script和link标记。它只会将前缀附加到那些不以link开头的script和http://标记。

Answer 2

看起来JS不是最好的解决方案。我在服务器端使用PHP解决了这个问题。我定义了一个全局$前缀变量，并将其附加到动态生成的主机名和路径以获取绝对URL并仍然保持脚本的可移植性。

Answer 3

您可以在Web服务器的配置文件中将请求/css/*或/js/*重定向到cdn.example.com/css/*或cdn.example.com/js/*（例如，Apache服务器的.htaccess）和浏览器获取必要的文件。此解决方案将使您的Web服务器上的负载（不如发送css或js文件），因此最好手动编写cdn路径。

使用javascript为cdn添加相对路径

3 个答案: