J'ai besoin de mettre à jour quelques centaines de pages HTML statiques dont la date de copyright est codée en dur dans le pied de page. Je veux le remplacer par du JavaScript qui sera mis à jour automatiquement chaque année.
Actuellement j'utilise:
<script type="text/javascript">var year = new Date();document.write(year.getFullYear());</script>Est-ce aussi court que possible?
Réponses:
Voici le plus court possible:
<script>document.write(new Date().getFullYear())</script>Cela fonctionnera dans tous les navigateurs que j'ai rencontrés.
Comment j'y suis arrivé:
getFullYeardirectement sur la nouvelle création Date, pas besoin de variable. new Date().getFullYear()peut sembler un peu étrange, mais c'est fiable: la new Date()pièce est faite en premier, puis.getFullYear() .type, car JavaScript est la valeur par défaut; cela est même documenté dans le cadre de la spécification HTML5 , qui dans ce cas est probablement en train d'écrire ce que les navigateurs font déjà.Il est important de noter que cela ne fonctionne que sur les navigateurs où JavaScript est activé. Idéalement, cela serait mieux géré comme un travail par lots hors ligne ( sedscript sur * nix, etc.) une fois par an, mais si vous voulez la solution JavaScript, je pense que c'est aussi court que possible. (Maintenant, je suis allé et tenté le destin.)
document.writepour le contenu en ligne que pendant la phase d'analyse initiale (comme illustré ci-dessus, dans une <script>...</script>balise - ou dans un .jsfichier chargé avec une scriptbalise sans defer ou async). Lorsque la page est entièrement analysée, le flux de documents est fermé, et l'utilisation le document.writerouvre - en remplaçant complètement le document par un nouveau. Si vous souhaitez ajouter un an après la fin de l'analyse principale, vous souhaitez utiliser le DOM. (Ce n'est pas un changement, ça a toujours été comme ça.)
La réponse de TJ est excellente mais je suis tombé sur un scénario où mon HTML était déjà rendu et le script document.write écraserait tout le contenu de la page avec seulement l'année de la date.
Pour ce scénario, vous pouvez ajouter un nœud de texte à l'élément existant à l'aide du code suivant:
<div>
©
<span id="copyright">
<script>document.getElementById('copyright').appendChild(document.createTextNode(new Date().getFullYear()))</script>
</span>
Company Name
</div>createTextNode()n'interprète pas le HTML comme <br>comment créer un nœud avec HTML?
Si vous souhaitez inclure un laps de temps à l'avenir, avec l'année en cours (par exemple 2017) comme année de début afin que l'année prochaine, elle apparaisse comme ceci: «© 2017-2018, Company.», Puis utilisez le code suivant . Il sera automatiquement mis à jour chaque année:
© Copyright 2017<script>new Date().getFullYear()>2017&&document.write("-"+new Date().getFullYear());</script>, Company.© Copyright 2017-2018, Société.
Mais si la première année s'est déjà écoulée, le code le plus court peut être écrit comme ceci:
© Copyright 2010-<script>document.write(new Date().getFullYear())</script>, Company.<script type="text/javascript">document.write(new Date().getFullYear());</script>La solution JS fonctionne très bien mais je conseillerais une solution côté serveur. Certains des sites que j'ai consultés avaient ce problème de la page entière vide et seulement l'année étant vue de temps en temps.
La raison en est que document.write a en fait écrit sur tout le document.
J'ai demandé à mon ami d'implémenter une solution côté serveur et cela a fonctionné pour lui. Le code simple en php
<?php echo date('Y'); ?>Prendre plaisir!
document.writeété utilisée après le DOM déjà chargé. La solution est de ne pas utiliser document.writeaprès tous les chargements DOM, ou, mieux encore, de ne pas utiliser document.writedu tout.
Voici la version la plus courte et la plus responsable ultime qui fonctionne même à la fois AD et BC.
[rouleaux de tambour ...]
<script>document.write(Date().split` `[3])</script>C'est tout. 6 octets de moins que la réponse acceptée.
Si vous devez être compatible ES5, vous pouvez vous contenter de:
<script>document.write(Date().split(' ')[3])</script>C'est la meilleure solution à laquelle je puisse penser qui fonctionnera avec du JavaScript pur. Vous pourrez également styliser l'élément car il peut être ciblé en CSS. Ajoutez simplement à la place de l'année et il sera automatiquement mis à jour.
//Wait for everything to load first
window.addEventListener('load', () => {
//Wrap code in IIFE
(function() {
//If your page has an element with ID of auto-year-update the element will be populated with the current year.
var date = new Date();
if (document.querySelector("#auto-year-update") !== null) {
document.querySelector("#auto-year-update").innerText = date.getFullYear();
}
})();
});<div>©<script>document.write(new Date().getFullYear());</script>, Company.
</div>Pour React.js, voici ce qui a fonctionné pour moi dans le pied de page ...
render() {
const yearNow = new Date().getFullYear();
return (
<div className="copyright">© Company 2015-{yearNow}</div>
);
}selon l'audit chrome
Pour les utilisateurs sur des connexions lentes, les scripts externes injectés dynamiquement via
document.write()peuvent retarder le chargement de la page de plusieurs dizaines de secondes.https://web.dev/no-document-write/?utm_source=lighthouse&utm_medium=devtools
donc une solution sans erreur est:
(new Date).getFullYear();