Heim  >  Artikel  >  Web-Frontend  >  Ausführliche Erklärung, wie Sie den Titel einer Webseite ändern können, wenn diese den Fokus verliert

Ausführliche Erklärung, wie Sie den Titel einer Webseite ändern können, wenn diese den Fokus verliert

零下一度
零下一度Original
2017-06-26 15:19:271995Durchsuche

Vorhin gesagt: Es muss auf einem Browser basieren, der H5 unterstützt

Die API selbst ist sehr einfach und besteht aus den folgenden drei Teilen.

document.hidden: Ein boolescher Wert, der angibt, ob die Seite ausgeblendet ist. Das Ausblenden der Seite umfasst, dass sich die Seite in einem Hintergrundtab befindet oder den Browser minimiert (beachten Sie, dass eine von anderer Software abgedeckte Seite nicht als ausgeblendet gilt, z. B. ein geöffnetes Sublime, das den Browser abdeckt).

document.visibilityState: Wert, der die folgenden 4 möglichen Zustände darstellt

versteckt: Die Seite befindet sich im Hintergrundtab oder der Browser ist minimiert

sichtbar: Die Seite befindet sich im Vordergrund-Registerkarte Mittel

prerender: Die Seite führt ein Pre-Rendering außerhalb des Bildschirms durch. Der Wert von document.hidden ist true

unloaded: Die Seite wird aus dem Speicher entladen >Visibilitychange-Ereignis: Wenn das Dokument aus dem Speicher entladen wird. Dieses Ereignis wird ausgelöst, wenn sichtbar zu unsichtbar wird oder von unsichtbar zu sichtbar wird.

Auf diese Weise können wir das Visibilitychange-Ereignis abhören, wenn das Ereignis ausgelöst wird, den Wert von document.hidden abrufen und einige Ereignisse auf der Seite basierend auf diesem Wert verarbeiten.

1 document.addEventListener('visibilitychange', function() { 
var isHidden = document.hidden;3   if (isHidden) {4     
document.title = '当焦点不在当前窗口时的网页标题';  } else {    
document.title = '再变回来或者做点其他的';   
}
 });
Solange Sie die Prinzipien verstehen, können Sie tun und lassen, was Sie wollen!~

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung, wie Sie den Titel einer Webseite ändern können, wenn diese den Fokus verliert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel:vue.js lädt neue InhalteNächster Artikel:vue.js lädt neue Inhalte