Necesito actualizar unos cientos de páginas HTML estáticas que tienen la fecha de copyright codificada en el pie de página. Quiero reemplazarlo con algunos JavaScript que se actualizarán automáticamente cada año.
Actualmente estoy usando:
<script type="text/javascript">var year = new Date();document.write(year.getFullYear());</script>¿Es esto lo más corto posible?
Respuestas:
Aquí está lo más corto que puedo obtener:
<script>document.write(new Date().getFullYear())</script>Eso funcionará en todos los navegadores que he encontrado.
Cómo llegué allí:
getFullYeardirectamente al recién creado Date, sin necesidad de una variable. new Date().getFullYear()puede parecer un poco extraño, pero es confiable: la new Date()parte se realiza primero, luego el .getFullYear().type, porque JavaScript es el predeterminado; esto incluso se documenta como parte de la especificación HTML5 , que en este caso probablemente escriba lo que los navegadores ya hacen.Es importante tener en cuenta que esto solo funciona en navegadores donde JavaScript está habilitado. Idealmente, esto se manejaría mejor como un trabajo por lotes fuera de línea ( sedscript en * nix, etc.) una vez al año, pero si desea la solución de JavaScript, creo que es lo más breve posible. (Ahora me he ido y tentado al destino).
document.writecontenido en línea durante la fase de análisis inicial (como se muestra arriba, en una <script>...</script>etiqueta, o en un .jsarchivo cargado con una scriptetiqueta sin defer o async). Cuando la página se analiza por completo, la secuencia de documentos se cierra y, al usarla, se document.writevuelve a abrir, reemplazando completamente el documento por uno nuevo. Si desea agregar un año después de que se complete el análisis principal, desea usar el DOM. (Esto no es un cambio, siempre ha sido así.)
La respuesta de TJ es excelente, pero me encontré con un escenario en el que mi HTML ya estaba renderizado y el script document.write sobrescribiría todo el contenido de la página solo con la fecha del año.
Para este escenario, puede agregar un nodo de texto al elemento existente utilizando el siguiente código:
<div>
©
<span id="copyright">
<script>document.getElementById('copyright').appendChild(document.createTextNode(new Date().getFullYear()))</script>
</span>
Company Name
</div>createTextNode()no interpreta html como, <br>¿cómo se crea un nodo con HTML?
Si desea incluir un marco de tiempo en el futuro, con el año actual (por ejemplo, 2017) como el año de inicio para que el próximo año aparezca así: "© 2017-2018, Compañía", utilice el siguiente código . Se actualizará automáticamente cada año:
© Copyright 2017<script>new Date().getFullYear()>2017&&document.write("-"+new Date().getFullYear());</script>, Company.© Copyright 2017-2018, Empresa.
Pero si ya pasó el primer año, el código más corto puede escribirse así:
© Copyright 2010-<script>document.write(new Date().getFullYear())</script>, Company.<script type="text/javascript">document.write(new Date().getFullYear());</script>La solución JS funciona muy bien, pero recomendaría una solución del lado del servidor. Algunos de los sitios que revisé tenían este problema de la página entera en blanco y solo el año visto de vez en cuando.
La razón de esto fue document.write en realidad escribió sobre todo el documento.
Le pedí a mi amigo que implementara una solución del lado del servidor y funcionó para él. El código simple en php
<?php echo date('Y'); ?>¡Disfrutar!
document.writese usó después de que el DOM ya se haya cargado. La solución es no usar document.writedespués de todas las cargas DOM, o, mejor aún, no usar document.writeen absoluto.
Aquí está la última versión más breve y responsable que incluso funciona tanto AD como BC.
[tambores ...]
<script>document.write(Date().split` `[3])</script>Eso es. 6 bytes más cortos que la respuesta aceptada.
Si necesita ser compatible con ES5, puede conformarse con:
<script>document.write(Date().split(' ')[3])</script>Esta es la mejor solución que se me ocurre que funcionará con JavaScript puro. También podrá diseñar el elemento, ya que puede orientarse en CSS. Simplemente agregue en lugar del año y se actualizará automáticamente.
//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>Para React.js, lo siguiente es lo que funcionó para mí en el pie de página ...
render() {
const yearNow = new Date().getFullYear();
return (
<div className="copyright">© Company 2015-{yearNow}</div>
);
}de acuerdo con la auditoría de cromo
Para los usuarios con conexiones lentas, las secuencias de comandos externas inyectadas dinámicamente
document.write()pueden retrasar la carga de la página en decenas de segundos.https://web.dev/no-document-write/?utm_source=lighthouse&utm_medium=devtools
entonces la solución sin errores es:
(new Date).getFullYear();