Früher hatten unsere Browser keine Tab-Browsing-Funktion, aber wenn wir uns heute alle verfügbaren Browser ansehen, können wir sehen, dass alle Browser diese Funktion bieten. Als Programmierer habe ich normalerweise 10–15 Tabs gleichzeitig geöffnet, und manchmal sind es mehr als 25–30.
Früher gab es keine Möglichkeit festzustellen, welcher Tab aktiv war und welcher Tab aktiv war, aber mit der HTML5 Visibility API können wir erkennen, ob ein Besucher unsere Webseite anzeigt.
In diesem Tutorial lernen wir den Umgang mit der HTML5 Visibility API und führen eine einfache Demonstration durch, um den Status der Seite zu ermitteln. In dieser Demo ändern wir den Dokumenttitel basierend auf dem Sichtbarkeitsstatus der Seite.
Mit der Einführung dieser API begrüßen wir zwei neue Dokumenteigenschaften, die zwei verschiedene Funktionen erfüllen. Der erste ist document.visibilityState，第二个是 document.hidden.
document.visibilityState enthält vier verschiedene Werte wie folgt:
document.hidden ist eine boolesche Eigenschaft, die auf „false“ gesetzt wird, wenn die Seite sichtbar ist, und auf „true“, wenn die Seite ausgeblendet ist.
Jetzt können wir steuern, wie sich unsere Website verhält, wenn sie für Benutzer verborgen ist.
Wir kannten unsere Verfügbarkeitseigenschaft sofort, aber jetzt ist es an der Zeit, sich das Ereignis anzuhören, damit wir über neue Situationen bezüglich der Sichtbarkeit der Seite informiert werden können. Dies geschieht über das visibilitychange-Event. Wir werden eine kurze Demonstration sehen, wie man mit diesem Ereignis umgeht.
document.addEventListener('visibilitychange', function(event) {
if (!document.hidden) {
// The page is visible.
} else {
// The page is hidden.
}
});
Dieser Code ist nur ein einfaches Beispiel für die Nutzung dieses Ereignisses und die Ermittlung des aktuellen Status der Webseite. Aber damit Sie es wissen: Diese Eigenschaften und Methoden sollten alle Herstellerpräfixe verwenden, da diese Ereignisse und Eigenschaften in einigen Browsern über Herstellerpräfixe verfügen. Jetzt sehen wir denselben Code browserübergreifend:
// Get Browser-Specifc Prefix
function getBrowserPrefix() {
// Check for the unprefixed property.
if ('hidden' in document) {
return null;
}
// All the possible prefixes.
var browserPrefixes = ['moz', 'ms', 'o', 'webkit'];
for (var i = 0; i < browserPrefixes.length; i++) {
var prefix = browserPrefixes[i] + 'Hidden';
if (prefix in document) {
return browserPrefixes[i];
}
}
// The API is not supported in browser.
return null;
}
// Get Browser Specific Hidden Property
function hiddenProperty(prefix) {
if (prefix) {
return prefix + 'Hidden';
} else {
return 'hidden';
}
}
// Get Browser Specific Visibility State
function visibilityState(prefix) {
if (prefix) {
return prefix + 'VisibilityState';
} else {
return 'visibilityState';
}
}
// Get Browser Specific Event
function visibilityEvent(prefix) {
if (prefix) {
return prefix + 'visibilitychange';
} else {
return 'visibilitychange';
}
}
Wir verfügen über alle Browser-Präfixeigenschaften und die Ereignisse können angewendet werden. Jetzt werden wir den vorherigen Code entsprechend ändern.
// Get Browser Prefix
var prefix = getBrowserPrefix();
var hidden = hiddenProperty(prefix);
var visibilityState = visibilityState(prefix);
var visibilityEvent = visibilityEvent(prefix);
document.addEventListener(visibilityEvent, function(event) {
if (!document[hidden]) {
// The page is visible.
} else {
// The page is hidden.
}
});
Wir können die Verwendung dieser API in vielen verschiedenen Szenarien in Betracht ziehen.
Da wir bisher gesehen haben, dass der Code die HTML5 Page Visibility API verwendet, ist es an der Zeit, sofort Maßnahmen zu ergreifen.
In dieser Demo schauen wir uns an, wie man die Abfrage der neuesten Informationen auf dem Server einschränkt, allerdings nur, während der Benutzer die Seite betrachtet. Ich gehe davon aus, dass jQuery bereits in Ihrer Seite enthalten ist. Hier erhöhen wir lediglich die Anzahl, dies könnte jedoch durch eine echte Serverabfrage ersetzt werden.
<!-- This element will show updated count --> <h1 id="valueContainer">0</h1>
<script type="text/javascript">
// Get Browser Prefix
var prefix = getBrowserPrefix();
var hidden = hiddenProperty(prefix);
var visibilityState = visibilityState(prefix);
var visibilityEvent = visibilityEvent(prefix);
var timer = null;
function increaseVal() {
var newVal = parseInt($('#valueContainer').text()) + parseInt(1);
$('#valueContainer').text(newVal);
document.title = newVal + ': Running';
timer = setTimeout(function() {
increaseVal();
}, 1);
}
// Visibility Change
document.addEventListener(visibilityEvent, function(event) {
if (document[hidden]) {
clearTimeout(timer);
var val = parseInt($('#valueContainer').text());
document.title = val + ': Pause';
} else {
increaseVal();
}
});
increaseVal();
</script>
Demo-Ansicht
Wenn Sie die Browserunterstützung für diese API überprüfen möchten, empfehle ich Ihnen, sich „Kann ich sie verwenden?“ anzusehen. . Um die Browserunterstützung jedoch programmgesteuert zu finden, empfehle ich die Lektüre dieses Artikels, um die Unterstützung für verschiedene HTML5-Funktionen zu ermitteln. Bisher haben wir eine gute Unterstützung für diese API in fast allen gängigen und neuesten Browsern.
Ich würde sagen, dass wir eine sehr schöne API haben, die nur aus zwei Eigenschaften und einem Ereignis besteht. Auf diese Weise lässt es sich problemlos in Ihre bestehenden Anwendungen integrieren, was sich positiv auf Ihr Benutzererlebnis auswirken kann. Endlich können wir jetzt steuern, wie sich unsere Websites verhalten, wenn sie für Benutzer verborgen sind.
Das obige ist der detaillierte Inhalt vonImplementieren Sie die Kontrolle der Seitensichtbarkeit mithilfe der HTML5-Seitensichtbarkeits-API. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
