Javascript Girl
  1. Javascript Girl
  3. Chargez des fichiers de script et de style externes dans un SPA
Intereting Posts
Arrêter de charger la page si Javascript est désactivé Quelle est la configuration la plus simple pour un récipient docker de MEAN stack pour avoir la même configuration sur OS X et DigitalOcean? Comment configurer la vue parental par défaut avec le routeur UI angulaire JavaScript ES6: test de la fonction flèche, fonction intégrée, fonction régulière? Comment puis-je effacer une entrée de fichier HTML avec JavaScript? Comment appeler une fonction à partir d'un autre module Selenium WebDriver JS – Explicit Wait Notification push | Est-ce que le websocket est obligatoire? Aidez-moi à comprendre cet exploit JavaScript Extension google chrome: comment ouvrir une nouvelle fenêtre de navigateur plus d'une fois? Passer la variable au modèle html dans nodemailer Comment jQuery protège-t-il l'écrasement de jQuery et $ Problème JavaScript: getElementsByName () ne fonctionne pas pour moi Bouclez toutes les collections Mongo et exécutez la requête Attendez que toutes les demandes $ http soient complétées dans les JL angulaires

Chargez des fichiers de script et de style externes dans un SPA

J'ai un type de SPA qui consomme une API pour récupérer des données. Il existe une instance de ce SPA et tous utilisent des fichiers de style et de script courants. Donc, mon problème est quand je change une seule ligne dans ces fichiers, je devrai ouvrir toutes les instances et mettre à jour les fichiers. C'est vraiment long pour moi.

L'une des approches consiste à mettre ces fichiers dans un dossier dans le serveur, puis à modifier la version en fonction de l'heure, mais je perdrai le cache du navigateur si j'utilise cette solution: 

<link href="myserver.co/static/main.css?ver=1892471298" rel="stylesheet" /> <script src="myserver.co/static/script.js?ver=1892471298"></script>

La valeur de ver est produite en fonction du temps et je ne peux pas utiliser le cache du navigateur. J'ai besoin d'une solution pour mettre à jour ces fichiers à partir de l'API, alors toutes les SPA seront mises à jour.

Dans votre étiquette tête, vous pouvez ajouter le code ci-dessous: 

 <script type="text/javascript"> var xmlhttp = new XMLHttpRequest(); var url = "http://localhost:4000/getLatestVersion"; //api path to get the latest version xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { var tags = JSON.parse(xmlhttp.responseText); for (var i = 0; i < tags.length; i++) { var tag = document.createElement(tags[i].tag); if (tags[i].tag === 'link') { tag.rel = tags[i].rel; tag.href = tags[i].url; } else { tag.src = tags[i].url; } document.head.appendChild(tag); } } }; xmlhttp.open("POST", url, false); xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlhttp.send(); </script>

Votre chemin d'api devrait permettre "CORS" de votre site Web qui gère le code ci-dessus. Et votre api devrait renvoyer une donnée json comme ci-dessous: 

 var latestVersion = '1892471298'; //this can be stored in the database var jsonData = [ { tag: 'link', rel: 'stylesheet', url: 'http://myserver.co/static/main.css?ver=' + latestVersion }, { tag: 'script', rel: '', url: 'http://myserver.co/static/script.js?ver=' + latestVersion } ]; //return jsonData to the client here

Si vous modifiez quelque chose dans votre JS ou CSS, vous devez mettre à jour le cache du navigateur, tout ce que vous pouvez faire est de mettre à jour cette version particulière de JS pas toutes, elle devrait refléter dans le navigateur.

Que diriez-vous d'ajouter une méthode dans votre API renvoyant le dernier temps de modification des fichiers, puis d'insérer la valeur dans l'attribut "src" / "href" après la "ver ="