Ich frage mich, ob es eine Möglichkeit gibt, eine JavaScript-Funktion nur einmal beim ersten Laden der Seite auszuführen und dann beim nachfolgenden Neuladen nicht auszuführen.

Gibt es eine Möglichkeit, dies zu tun?

20
Colin 7 Aug. 2015 im 02:08

4 Antworten

Beste Antwort

Der folgende Code wird ausgeführt, sobald onload Ereignisbrände. Die Anweisung überprüft if Die einmalige Funktion wurde zuvor NICHT ausgeführt, indem ein Flag (hasCodeRunBefore) verwendet wurde, das dann in localStorage.

window.onload = function () {
    if (localStorage.getItem("hasCodeRunBefore") === null) {
        /** Your code here. **/
        localStorage.setItem("hasCodeRunBefore", true);
    }
}

Hinweis: Wenn der Benutzer den localStorage Auf jeden Fall wird die Funktion erneut ausgeführt, da das Flag (hasCodeRunBefore) entfernt wurde.

Gute Nachrichten...

Mit localStorage kann wegen Operatoren und langwierigen Funktionsnamen mühsam sein. Ich habe ein grundlegendes Modul erstellt, um dies zu vereinfachen Code würde ersetzt durch:

window.onload = function () {
    if (!ls.exists('has_code_run_before')) {
        /** Your code here... **/
        ls.set.single('has_code_run_before', true);

        /** or... you can use a callback. **/
        ls.set.single('has_code_run_before', true, function () {
           /** Your code here... **/ 
        });
    }
};

Update Nr. 1

Per @PatrickRoberts Kommentar können Sie {{X0} verwenden } Operator, um festzustellen, ob in localStorage ein Variablenschlüssel vorhanden ist

if (localStorage.getItem('hasCodeRunBefore') === null)

Wird

if (!('hasCodeRunBefore' in localStorage))

Und ist weniger ausführlich und viel sauberer.

Zweitens können Sie Werte wie ein Objekt (localStorage.hasCodeRunBefore = true) festlegen, obwohl es als Zeichenfolge und nicht als Boolescher Wert (oder welcher Datentyp auch immer Ihr Wert ist) gespeichert wird.

34
Abandoned Cart 5 Nov. 2018 im 16:28
function toBeExecutedOnFirstLoad(){
  // ...
}
if(localStorage.getItem('first') === null){
  toBeExecutedOnFirstLoad();
  localStorage.setItem('first','nope!');
}
2
Tobsta 6 Aug. 2015 im 23:12

Dies hängt davon ab, was das Laden der ersten Seite für Sie bedeutet. Es ist subjektiv.

Wenn Sie möchten, dass die Funktion ausgelöst wird, sobald das DOM analysiert wurde, aber nur der HTML-Code und keine anderen externen Ressourcen, binden Sie sie an das Ereignis DOMContentLoaded.

document.addEventListener('DOMContentLoaded', fn);

Wenn Sie andernfalls warten möchten, bis externe Ressourcen geladen sind, und dann das Ereignis auslösen, sollten Sie es wie folgt an das load -Ereignis des window -Objekts binden:

window.addEventListener('load', fn);

Hier sind einige Links aus dem Mozilla Developer Network, die das, was ich gerade gesagt habe, genauer erklären:

https://developer.mozilla.org/en-US/docs/Web/Events/load

https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded

Viel Glück!

2
Adrian Oprea 20 Mai 2018 im 09:14

Alles JavaScript muss jedes Mal ausgeführt werden, wenn eine Seite geladen wird. Wenn sich das Skript auf der Seite befindet, wird es ausgeführt.

Die Logik , die in dem auf der Seite enthaltenen JavaScript ausgeführt wird, kann abhängig vom Seitenstatus, der bereitgestellten Eingabe und allen anderen empfangenen Signalen, sei es vom Server oder vom Client, auf unterschiedliche Weise ausgeführt werden.

Wenn Sie eine serverseitige Sprache verwenden, können Sie ein Skript unter bestimmten Bedingungen rendern, z. B. wenn sich ein Benutzer zum ersten Mal anmeldet.

Wenn Sie das Javascript unabhängig vom Kontext einfügen müssen, müssen Sie andere Signale abhören.

Die einfache moderne Lösung besteht darin, localStorage . Mit localStorage können benutzerdefinierte Zeichenfolgenwerte auf benutzerdefinierten Schlüsselwerten für eine bestimmte Domäne gespeichert werden.

Der Code, um dies zu nutzen, würde folgendermaßen aussehen:

if (localStorage['...my key here...'] === '...my expected value here...') {
    // The page has been visited before
} else {
    // The page has not been visited before
    // OR
    // The user or script has cleared the localStorage value
}
localStorage['...my key here...'] = '...my expected value here...';

Das ist alles schön und gut, wenn Sie nur Dinge brauchen, um allein am Kunden zu arbeiten. Manchmal muss der Server wissen, ob die Seite zuvor besucht wurde oder nicht.

Die (weniger) einfache Lösung besteht darin, document.cookie :

if (/(?:^|;\s*)...my key here...=...my expected value here...(?:;|$)/.test(document.cookie)) {
    // the page has been visited before
} else {
    // The page has not been visited before
    // OR
    // The user or script has cleared the cookie
}
document.cookie = '...my key here...=...my expected value here...';

Wenn Sie die Ausführung verschieben müssen, bis die Seite vollständig geladen ist, fügen Sie das Skript einfach in einen onload - Rückruf ein, indem Sie das Ereignis dem Fenster zuweisen:

window.onload = function () {
    // do stuff when the page has loaded
    //this will override any other scripts that may have been assigned to .onload
};

Oder indem Sie den Ereignishandler an das Fenster binden:

window.addEventListener('load', function () {
    // do stuff when the page has loaded
}, false);
3
zzzzBov 6 Aug. 2015 im 23:23