2011-09-27 4 views
0

J'ai beaucoup de pages dans différents domaines qui ont besoin d'inclure .js .css et html. Je veux "à distance" mettre à jour le code inclus.JS: chargement externe

Donc, dans ces pages statiques J'pensais placer:

<script src="http://centraldomain.com/include.js" type="text/javascript"></script> 

alors dans ce fichier faire:

document.write('<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script><div id="results"></div>'); 

$('#result').load('http://domain.com/include-rest.html'); 

et en ce lieu html tout le html je veux insérer dans ces pages, par exemple :

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/cupertino/jquery-ui.css" type="text/css" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> 
some html without <head> or <body> 

Est-ce la meilleure approche à adopter? Existe-t-il un problème de sécurité d'attaque cross-domaine ou XSS que je ne prends pas en compte?

Merci

+0

lorsque je tente de charger() dans la div je reçois « XMLHttpRequest ne peut pas charger http:. //.com/include.html Origine http: //.com.ar n'est pas autorisé par Access-contrôle- Autoriser-Origine. " – Juan

+0

Cette erreur est due au fait que vous chargez un fichier d'un domaine différent. Essayez de définir 'crossDomain' à' true' – thedaian

+0

ne fonctionnait pas sur Safari :( – Juan

Répondre

0

Au lieu de gérer votre code chargement à l'aide des ressources externes, vous pouvez importer au lieu d'un seul fichier d'une utilisation d'un chargeur de ressources pour gérer les dépendances. Plutôt que de faire exécuter du code par des scripts externes (en trébuchant les mêmes règles d'origine), vous pouvez tout gérer au même endroit et contourner les problèmes inter-domaines.

yepnope.js est une ressource asynchrone qui aiderait. Vous pouvez utiliser le test pour n'importe quel site, importer les fichiers nécessaires, puis tester le site sur lequel vous vous trouvez pour déterminer si vous avez besoin d'exécuter du code supplémentaire.

Jetez un oeil à http://yepnopejs.com/ - voici un petit aperçu.

yepnope([{ 
    test : /* boolean(ish) - Something truthy that you want to test    */, 
    yep : /* array (of strings) | string - The things to load if test is true */, 
    nope : /* array (of strings) | string - The things to load if test is false */, 
    both : /* array (of strings) | string - Load everytime (sugar)    */, 
    load : /* array (of strings) | string - Load everytime (sugar)    */, 
    callback : /* function (testResult, key) | object { key : fn }   */, 
    complete : /* function              */ 
}, ... ]); 
+0

et comment j'inclurais le html externe à l'intérieur du div? – Juan

+0

Vous n'obtiendriez pas le problème, car le JS chargé de centraldomain.com s'exécuterait sur domain.com, et ainsi quand domain.com a essayé de $ .load() code de domain.com, il n'y aurait pas de problèmes inter-domaines – rooney

+0

j'ai essayé load() ing le html distant de la console (qui exécuterait sur domain.com, pas centraldomain.com) et j'ai toujours l'alerte de domaine croisé, même si j'ai mis crossDomain: true – Juan