Préfixe chemins relatifs pour cdn avec javascript

J'ai un site web simple avec des références relatives aux fichiers css et aux fichiers javascript dans l'en-tête. Existe-t-il un moyen de les développer en url absolues et de les préfixer avec "cdn". automatiquement au chargement de la page?Préfixe chemins relatifs pour cdn avec javascript

Voici une partie de ma tête actuelle:

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

Ce que je dois à la fin est

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

Source

2013-01-16 Maciej Swic

Voici comment vous pouvez ajouter le préfixe à tous les éléments de script:

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

Le script est en JavaScript pur et fonctionne pour les tags script et link. Il ajoutera le préfixe uniquement aux étiquettes link et script qui ne commencent pas par http://.

Source

2013-01-16 13:25:51

Ça a l'air bien. Puis-je en quelque sorte m'assurer qu'il fonctionne avant que le navigateur ne tente d'aller chercher les fichiers? –

Vous ne pouvez pas l'exécuter avant le démarrage du chargement. Le chargement commence lorsque les éléments DOM sont dans l'arborescence DOM, vous ne pouvez pas remplacer les attributs 'href' et' src' de l'élément avant qu'ils ne se trouvent dans l'arborescence DOM. –

-1

Vous pouvez faire rediriger les requêtes /css/* ou /js/* à cdn.example.com/css/* ou cdn.example.com/js/* dans les fichiers de configuration du serveur Web (par exemple, .htaccess pour Apache-serveur) et navigateur obtenir les fichiers nécessaires. Cette solution va faire la charge sur votre serveur web (pas autant que les fichiers send css ou js), il est donc préférable d'écrire le chemin vers cdn manuellement.

Source

2013-01-16 13:41:10

Merci pour la suggestion, mais il y a un autre gros problème autre que le chargement. Cela force les utilisateurs à se connecter à mon serveur encore et encore, puis le cdn, au lieu de demander la ressource directement à partir du cdn en premier lieu. Aucun point d'un cdn avec cette solution malheureusement. –

Je comprends, mais il n'y a pas d'autres solutions automatisées. Les modifications du côté client (javascript) n'ont pas résolu le problème. –

Il semble que JS n'est pas la meilleure solution. J'ai résolu le problème en utilisant PHP sur le côté serveur à la place. J'ai défini une variable $ prefix globale et l'ai ajouté à un nom d'hôte et un chemin générés dynamiquement pour obtenir l'URL absolue et conserver la portabilité du script.

Source

2013-01-17 12:13:07

Préfixe chemins relatifs pour cdn avec javascript

Répondre

Questions connexes