Devo aggiornare alcune centinaia di pagine HTML statiche che hanno la data di copyright codificata nel piè di pagina. Voglio sostituirlo con alcuni JavaScript che si aggiorneranno automaticamente ogni anno.
Attualmente sto usando:
<script type="text/javascript">var year = new Date();document.write(year.getFullYear());</script>È così corto?
Risposte:
Ecco il più breve che posso ottenerlo:
<script>document.write(new Date().getFullYear())</script>Funzionerà in tutti i browser che ho incontrato.
Come ci sono arrivato:
getFullYeardirettamente sul nuovo creato Date, senza bisogno di una variabile. new Date().getFullYear()può sembrare un po 'strano, ma è affidabile: la new Date()parte viene eseguita prima, poi il .getFullYear().type, perché JavaScript è l'impostazione predefinita; questo è persino documentato come parte della specifica HTML5 , che probabilmente in questo caso sta scrivendo ciò che i browser già fanno.È importante notare che questo funziona solo sui browser in cui JavaScript è abilitato. Idealmente, questo sarebbe meglio gestito come un processo batch offline ( sedscript su * nix, ecc.) Una volta all'anno, ma se si desidera la soluzione JavaScript, penso che sia il più breve possibile. (Ora sono andato e ho tentato il destino.)
document.writecontenuti incorporati durante la fase di analisi iniziale (come mostrato sopra, in un <script>...</script>tag) o in un .jsfile caricato con un scripttag senza defer o async). Quando la pagina viene analizzata completamente, il flusso di documenti viene chiuso e l'utilizzo lo document.writeriapre, sostituendo completamente il documento con uno nuovo. Se si desidera aggiungere un anno dopo il completamento dell'analisi principale, si desidera utilizzare il DOM. (Questo non è un cambiamento, è sempre stato così.)
La risposta di TJ è eccellente, ma mi sono imbattuto in uno scenario in cui il mio HTML era già reso e lo script document.write sovrascriveva tutto il contenuto della pagina con solo l'anno della data.
Per questo scenario, puoi aggiungere un nodo di testo all'elemento esistente usando il seguente codice:
<div>
©
<span id="copyright">
<script>document.getElementById('copyright').appendChild(document.createTextNode(new Date().getFullYear()))</script>
</span>
Company Name
</div>createTextNode()non interpreta HTML come <br>come si crea un nodo con HTML?
Se desideri includere un intervallo di tempo in futuro, con l'anno in corso (ad es. 2017) come l'anno di inizio, in modo che l'anno prossimo appaia così: “© 2017-2018, Azienda.”, Quindi utilizza il seguente codice . Si aggiornerà automaticamente ogni anno:
© Copyright 2017<script>new Date().getFullYear()>2017&&document.write("-"+new Date().getFullYear());</script>, Company.© Copyright 2017-2018, Azienda.
Ma se il primo anno è già passato, il codice più breve può essere scritto in questo modo:
© Copyright 2010-<script>document.write(new Date().getFullYear())</script>, Company.<script type="text/javascript">document.write(new Date().getFullYear());</script>La soluzione JS funziona alla grande, ma consiglierei una soluzione lato server. Alcuni dei siti che ho controllato hanno riportato il problema di un'intera pagina vuota e di tanto in tanto è stato visto solo l'anno.
La ragione di ciò era il document.write effettivamente scritto su tutto il documento.
Ho chiesto al mio amico di implementare una soluzione lato server e ha funzionato per lui. Il semplice codice in php
<?php echo date('Y'); ?>Godere!
document.writestata utilizzata dopo il DOM già caricato. La soluzione è di non utilizzare document.writedopo tutti i carichi DOM o, ancora meglio, di non utilizzare document.writeaffatto.
Ecco l'ultima versione più breve e responsabile che funziona anche sia AD che BC.
[rullo di tamburi ...]
<script>document.write(Date().split` `[3])</script>Questo è tutto. 6 byte più brevi della risposta accettata.
Se devi essere compatibile con ES5, puoi accontentarti di:
<script>document.write(Date().split(' ')[3])</script>Questa è la migliore soluzione che mi viene in mente che funzionerà con JavaScript puro. Sarai anche in grado di modellare l'elemento in quanto può essere scelto come target nei CSS. Basta aggiungere al posto dell'anno e verrà automaticamente aggiornato.
//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>Per React.js, il seguente è ciò che ha funzionato per me nel piè di pagina ...
render() {
const yearNow = new Date().getFullYear();
return (
<div className="copyright">© Company 2015-{yearNow}</div>
);
}secondo l'audit di Chrome
Per gli utenti con connessioni lente, gli script esterni iniettati dinamicamente tramite
document.write()possono ritardare il caricamento della pagina di decine di secondi.https://web.dev/no-document-write/?utm_source=lighthouse&utm_medium=devtools
quindi la soluzione senza errori è:
(new Date).getFullYear();