Entdecken Sie die HTML5-Seitensichtbarkeits-API

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.

Warum diese API verwenden?

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.

Überprüfen Sie den 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:

• Ausblenden: Die Seite ist auf keinem Bildschirm sichtbar
• Pre-Rendering: Die Seite wird außerhalb des Bildschirms geladen und ist für den Benutzer unsichtbar

• Sichtbar: Seite sichtbar

• Entladen: Die Seite wird gerade entladen (der Benutzer verlässt die aktuelle Seite)

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. 
  }
});

Wo können wir diese API verwenden?

Wir können die Verwendung dieser API in vielen verschiedenen Szenarien in Betracht ziehen.

1. Angenommen, Sie befinden sich in Ihrem Dashboard und die Seite fragt in regelmäßigen Abständen (z. B. zwei Minuten) nach Details zu einem RSS-Feed oder einer API. Daher können wir Aufrufe des RSS-Feeds oder der API einschränken, wenn die Seite für den Benutzer nicht sichtbar ist (d. h. der Benutzer sieht die Seite nicht tatsächlich).
2. Für Bildschieberegler. Wir können die Bewegung des Slider-Bildes begrenzen, wenn die Seite ausgeblendet ist.

3. Auf ähnliche Weise können wir HTML-Benachrichtigungen nur anzeigen, wenn die Seite für den Benutzer verborgen ist.

Da wir bisher gesehen haben, dass der Code die HTML5 Page Visibility API verwendet, ist es an der Zeit, sofort Maßnahmen zu ergreifen.

Demo

• Demo 1: Diese Demo zeigt, wie Sie die Page Visibility API verwenden, um den Seitentitel zu ändern. Demo ansehen
• Demo 2: Diese Demo zeigt, wie man die Abfrage von Daten vom Server einschränkt, wenn die Seite inaktiv ist.

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.

HTML

<!-- This element will show updated count -->
<h1 id="valueContainer">0</h1>

JavaScript

<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

Browser-Unterstützung

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.

Fazit

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 vonEntdecken Sie die HTML5-Seitensichtbarkeits-API. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!